假设我有一个带有以下内容的 App.vue
文件
<template>
<task-list>
<task>Task 1</task>
<task>Task 2</task>
</task-list>
</template>
<script>
import TaskList from './tasklist.vue'
export default {
//...
components: {
TaskList
}
//...
}
</script>
一个 TaskList.vue
<template>
<ul>
<slot></slot>
</ul>
</template>
<script>
import Task from './task.vue'
export default {
//...
name: 'task-list'
components: {
Task
}
//...
}
</script>
一个 Task.vue
<template>
<li><slot></slot></li>
</template>
<script>
export default {
name: 'task',
//...
}
</script>
和 main.js
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
如何在 TaskList.vue
中仅导入一次子组件 Task.vue
,而无需在 App.vue
中再次导入它
似乎如果我这样做,我会从VueJS收到错误,抱怨未注册的组件
[Vue警告]:未知的自定义元素: - 您是否正确注册了组件?对于递归组件,请确保提供“名称”选项 . 在---> src / App.vue中找到
有没有办法表明 task
是 task-list
的子组件而没有全局注册或 App.vue
再次导入?
2 回答
如果您在
TaskList.vue
中注册Task
,那么你只能在
TaskList.vue
的模板中使用<task>
.试试这个:
App.vue
使用道具将任务(一个数组)传递给TaskList.vue
App.vue
TaskList.vue
完整示例应用:
在
App.vue
中添加自定义组件task
: