首页 文章

VueJS - 如何在父组件中仅导入子组件一次

提问于
浏览
0

假设我有一个带有以下内容的 App.vue 文件

<template>
    <task-list>
        <task>Task 1</task>
        <task>Task 2</task>
    </task-list>
</template>
<script>
import TaskList from './tasklist.vue'
export default {
    //...
    components: {
        TaskList
    }
    //...
}
</script>

一个 TaskList.vue

<template>
    <ul>
        <slot></slot>
    </ul>
</template>
<script>
import Task from './task.vue'
export default {
    //...
    name: 'task-list'
    components: {
        Task
    }
    //...
}
</script>

一个 Task.vue

<template>
    <li><slot></slot></li>
</template>
<script>
export default {
    name: 'task',
    //...
}
</script>

main.js

import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

如何在 TaskList.vue 中仅导入一次子组件 Task.vue ,而无需在 App.vue 中再次导入它

似乎如果我这样做,我会从VueJS收到错误,抱怨未注册的组件

[Vue警告]:未知的自定义元素: - 您是否正确注册了组件?对于递归组件,请确保提供“名称”选项 . 在---> src / App.vue中找到

有没有办法表明 tasktask-list 的子组件而没有全局注册或 App.vue 再次导入?

2 回答

  • 0

    如果您在 TaskList.vue 中注册 Task

    那么你只能在 TaskList.vue 的模板中使用 <task> .


    试试这个: App.vue 使用道具将任务(一个数组)传递给 TaskList.vue

    App.vue

    <template>
        <task-list :tasks="tasks"></task-list>
    </template>
    <script>
    import TaskList from "./tasklist.vue";
    export default {
      //...
      data() {
        return {
          tasks: ['Task 1', 'Task 2']
        };
      },
      components: {
        TaskList
      },
      //...
    };
    </script>
    

    TaskList.vue

    <template>
      <ul>
        <task v-for="task in tasks" :key="task">{{ task }}</task>
      </ul>
    </template>
    
    <script>
    import Task from './Task.vue';
    export default {
      name: "task-list",
      props: {
        tasks: {
          type: Array,
          default: () => []
        }
      },
      components: {
        Task
      }
      //...
    };
    </script>
    

    完整示例应用:

    Edit Vue Template

  • 0

    App.vue 中添加自定义组件 task

    <template>
      <task-list>
        <task>Task 1</task>
        <task>Task 2</task>
      </task-list>
    </template>
    
    <script>
    import TaskList from './tasklist.vue'
    import Task from './Task.vue'
    
    export default {
        //...
        components: {
            TaskList,
            Task
        }
        //...
    }
    </script>
    

相关问题