VueJS - 如何在父组件

Question

假设我有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)
})

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

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

  

[Vue警告]：未知的自定义元素： - 你注册了吗？   组件正确吗？对于递归组件，请务必提供   “名称”选项。

     

在

中找到      

---＆GT;在src / App.vue          

有没有办法表明task是task-list的子组件，没有全局注册或在App.vue中再次导入？

Answer 1

如果您在Task注册TaskList.vue，

然后您只能在<task>的模板中使用TaskList.vue。

试试这个：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>

完整的示例应用：

Answer 2

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

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