如何在父组件中使用子组件？

Question

我有这种情况：

父组件（Parent.vue）：

<template>
........
</template>
    
<script>
export default {
name: 'Parent'
...........
</script

---

子组件（Child.vue）：

<template>
........
</template>
    
<script>
export default {
name: 'Child'
...........
</script

要在父组件模板中使用子组件（子组件模板），需要做什么？步骤是什么？

Answer 1

您可以将Child称为本地as stated in the documentation。

在components处将该组件声明为对象。

Parent.vue：

<template>
    <child></child>
</template>

<script>
//Import the Child component to the parent
import Child from "@/path/to/Child.vue";

export default {
    name: 'Parent',//Declare the components object 
    components: {
        //Declare your components here
        Child //This is the Child component
    }
...........
</script>