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

Question

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

应用程序（父）--> 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>

<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>

命令行告诉我导入已导入，但导入尚未使用。

希望大家帮帮我

提前致谢！

Answer 1

导入子组件的导出是第一步，现在它可用于当前模块。但是您仍然需要使用以下components选项在父级中注册该导入的组件：

家长

import Todo from './Todo'

export default {
  name: 'Todolist',
  props: {
    todos: Array
  },
  components: {  // ? add this
    Todo
  }
}