Vue.js 将子组件导入组件答案

【问题标题】：Vue.js import child component into a componentVue.js 将子组件导入组件
【发布时间】：2021-05-16 06:18:58
【问题描述】：

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

App（父）--> Todolist（子）--> Todo（子）

错误：

24:5 错误“Todo”组件已注册但未使用 vue/no-unused-components

代码

Todolist

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

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

希望大家帮帮我

提前致谢！

【问题讨论】：

标签： javascript vue.js vue-component eslint vue-cli

【解决方案1】：

可以动态导入组件，如上所述，仍然需要注册。

改用：

import Todo from './Todo'

这个选项

const Todo = () => import('./Todo')

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

或

在components中导入注册即可添加组件

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

【讨论】：

【解决方案2】：

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

父母

import Todo from './Todo'

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

【讨论】：