Vue.js 导入子组件成组件

Question

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

应用（父）--> Todolist（子）--> Todo（子）

错误：

24:5 错误“Todo”组件已注册但未使用 vue/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'),
        },