Vue.js将子组件导入到组件中

Question

今天我正在制作一个todo web应用程序，但现在我想在我的Todolist组件中导入Todo。我的组件:

App (Parent)—>Todolist(儿童)——>待办事项(孩子)

错误:

24:5 error The "Todo"组件已注册但未使用value/no-unused-components

基于

<template>
<!-- TEMPLATE FOR THE TODOS -->
<div v-for="(todo) in todos" :key="todo.id">
<Todo
:todo="todo.text"
:index="todo.id"
:checked="todo.checked"
:deleteTodo="deleteTodo"
/>
</div>
</template>

<script>
import Todo from './Todo'
export default {
name: 'Todolist',
props: {
todos: Array
}
}
</script>

命令行告诉我导入已经导入，但是导入还没有被使用。

希望你们能帮助我，

提前感谢!

Answer 1

导入子组件的导出是第一步，现在它对当前模块可用。但是你仍然需要使用components选项在父组件中注册导入的组件:

父母

import Todo from './Todo'
export default {
name: 'Todolist',
props: {
todos: Array
},
components: {  // ✅ add this
Todo
}
}

Answer 2

动态导入组件是可能的，但仍然需要如上所述的注册。

使用:

import Todo from './Todo'

此选项const Todo = () => import('./Todo')

组件只在需要时才会被加载。

或

您可以通过在components

中导入和注册来添加组件。

components: {            
Todo: () => import('./Todo'),
},