Vue.js 导入子组件成组件

Question

Today I am making an todo web app, but now I want to import a Todo in my Todolist component. My components:

App (Parent) --> Todolist (Child) --> Todo (Child)

Error:

24:5 error The "Todo" component has been registered but not used vue/no-unused-components

Code

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>

The command line is telling me that the import has been imported, but the import has not been used yet.

Hope you guys can help me out,

Thanks in advance!

Answer 1

Importing the child component's export is the first step, now its available to the current module. But you still need to register that imported component in the parent using the components option:

Parent

import Todo from './Todo'

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

Answer 2

It is possible to import a component dynamically, registration, as described above, is still required.

Use instead:

import Todo from './Todo'

this option

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

The component will be loaded only when needed.

or

You can add a component by importing and registering in components

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