Vue.js 将子组件导入组件

Question

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

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

错误：

24:5 error The "Todo" component has been registered but not used 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>

命令行告诉我import已经导入了，但是import还没用

希望大家帮帮我，

提前致谢！

Answer 1

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

Parent

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'),
        },

Vue.js 将子组件导入组件

Vue.js import child component into a component

javascript

eslint

vue.js

vue-component

vue-cli