英文:
Component disappears when removing "setup" from script in Vue3
问题
这段代码是有关Vue 3的应用开发的。最初的代码中使用了<script setup>，而后一个代码片段中移除了它，导致"Map"组件完全消失。这可能与从脚本标记中移除"setup"有关，但由于没有需要设置的内容，因此很难理解为什么会导致一切都崩溃。也尝试在export default块下添加一个空的 setup() 方法，但没有帮助。
以下是修改后的部分代码：
最初的代码：
<template>
<v-app>
<v-main>
<Map :features="features" />
<v-btn>Submit</v-btn>
</v-main>
</v-app>
</template>
<script setup>
import Map from '@/components/Map.vue'
</script>
修改后的代码：
<template>
<v-app>
<v-main>
<Map :features="features" />
<v-btn>Submit</v-btn>
</v-main>
</v-app>
</template>
<script>
import Map from '@/components/Map.vue';
export default {
data() {
return {
features: []
}
},
methods: {
submit() {
console.log("clicked submit")
}
}
}
</script>
请注意，从<script setup>切换到常规的<script>块需要确保将features属性正确导出，以供"Map"组件使用。
英文:
I am trying to make a Vue 3 app. I am familiar with Vue 2 but not as much with Vue 3.
This code works:
<template>
<v-app>
<v-main>
<Map :features="features" />
<v-btn>Submit</v-btn>
</v-main>
</v-app>
</template>
<script setup>
import Map from '@/components/Map.vue'
</script>
But when I change it to this:
<template>
<v-app>
<v-main>
<Map :features="features" />
<v-btn>Submit</v-btn>
</v-main>
</v-app>
</template>
<script>
import Map from '@/components/Map.vue';
export default {
data() {
return {
features: []
}
},
methods: {
submit() {
console.log("clicked submit")
}
}
}
</script>
The "Map" component disappears completely. I guess it has something to do with removing "setup" from the script tag? But I don't have anything to set up here so I don't understand why it breaks everything. I also tried adding an empty setup() method under the export default block but that didn't help.
For reference, here is the script from the Map component:
<script>
import { ref, inject } from "vue";
export default {
setup() {
const center = ref([40, 40]);
const zoom = ref(8);
const rotation = ref(0);
return {
center,
zoom,
rotation,
};
},
data() {
return {
draw: true,
modify: false,
}
},
props: {
features: [],
},
methods: {
setToModify() {
this.draw = false;
this.modify = true;
},
clear() {
this.draw = true;
this.modify = false;
this.drawnFeatures = [];
},
},
};
</script>
答案1
得分: 2
<script setup> 是在单文件组件（SFCs）内使用 Composition API 的编译时语法糖。
<script setup> 大大改进了开发体验（DX）。例如，您不必显式注册组件（只需导入并使用）。有关更多功能，请阅读上面链接的文档。
现在来回答您的主要问题："但是当我将它更改为这样时：“Map”组件完全消失了。" 就像在 Vue 2 中注册组件一样，在没有 setup 的脚本中，您必须显式注册组件，如下所示：
<script>
import Map from '@/components/Map.vue';
export default {
// 这里...
components: {
Map
},
data() {
return {
features: []
};
},
methods: {
submit() {
console.log("clicked submit");
}
}
}
</script>
英文:
https://vuejs.org/api/sfc-script-setup.html
> <script setup> is a compile-time syntactic sugar for using Composition API inside Single-File Components (SFCs).
<script setup> improves DX a lot. For example, you don't have to register components explicitly (just import them, and use). For more features, you can read it's documentation linked above.
Now coming to your main question "But when I change it to this: The "Map" component disappears completely." As you would register the components in Vue 2, it's still the same in Vue 3. In your script without setup you must explicitly register the component like this:
<script>
import Map from '@/components/Map.vue';
export default {
// here...
components: {
Map
},
data() {
return {
features: []
}
},
methods: {
submit() {
console.log("clicked submit")
}
}
}
</script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论