vue.js - 如何在父组件中使用子组件？

Question

我有这种情况：

父组件（Parent.vue）：

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

---

子组件（Child.vue）：

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

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

标签： vue.jsvue-component

Answer 1

您可以按照文档中的说明将 Child 称为本地组件。

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

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