第六节：Vue组件化开发(5)-父组件和子组件

文章目录

• 前言
• 系列文章目录，Vue学习目录，每一章都有代码例子说明
• 五、Vue-父组件和子组件

---

前言

本博客的内容很多都来自官网，现在只是把自己的一些理解写出来给大家一起讨论学习
Vue官网

系列文章目录，Vue学习目录，每一章都有代码例子说明

五、Vue-父组件和子组件

5.1 什么是父子组件？

其实就是组件里通过components再嵌套注册组件，嵌套注册组件的就是子组件，被嵌套就是父组件。
如图，红色区域就是父组件，嵌套在里面的蓝色区域就是子组件

注意：全局组件不存在父组件和子组件的，因为全局组件在实例里的任何地方都可以使用

5.2 父子组件体现在代码上的结构

看下面例子的代码

• Vue实例就是一个最大的父组件，component1注册在实例上，那component1就是Vue实例的子组件。
• component2注册在component1组件上，那component2就是component1组件的子组件。

<div id="app">
    <component1></component1>
</div>
<template id="component1">
    <div>
        <h2>我的第一个组件</h2>
        <component2></component2>
    </div>
</template>
<template id="component2">
    <div>
        <h2>我的第二个组件</h2>
    </div>
</template>
</body>
<script src="../css/vue.js"></script>
<script>
    const component1 = {
        template: '#component1',
        components: {
            'component2': {
                template: "#component2"
            }
        }
    }
    const app = new Vue({
        el: '#app',
        components: {
            'component1': component1
        }
    })
</script>