Vue.js 将子组件导入组件

Posted 2023-02-23

【中文标题】Vue.js 将子组件导入组件

【英文标题】：Vue.js import child component into a component

【发布时间】：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>

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

希望大家帮帮我

提前致谢！

【参考方案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