十七、Vue组件化开发之详解父子组件

什么Vue中的父子组件

关于父子组件，有时候挺不容易区分的。先来看看什么是父子元素，如div下面紧跟着一个span元素，那么相对于span来说，它的父元素就是div；相对于div元素来说，它的子元素是span。

那么，Vue中的父子组件也可以这么理解，不同的是，Vue组件中，将元素换成了组件。下面通过代码来来看看，代码更为清晰。

<div id="app">
    <!--调用组件-->
    <parent></parent>
</div>
<script>
    // 子组件
    const childs = Vue.extend({
        template:`<div>
            <h2>子组件</h2>
        </div>`
    });
	
    // 父组件
    const parent = Vue.extend({
        template:`<div>
            <h2>父组件</h2>
            <childs></childs>
        </div>`,
        components:{
            // 父组件中注册子组件
            childs:childs
        }
    });

    var app = new Vue({
        el:"#app",
        components:{
            parent: parent,
        }
    });
</script>

1）上述案例中定义了parent与child组件，见名知意，parent就是父组件，child是子组件；

2）在parent父组件中，使用父组件中的components属性注册了一个child组件，即child的父组件是parent组件；

3）在此案例中，child组件一定要在parent组件之前初始化，否则会报错；

4）在Vue实例中注册了parent组件，vue实例是一个特殊的组件，即root组件，一切从这里开始；

5）理解父子组件非常重要，我们经常要使用的跨组件传输数据都与之有关，理解父子组件对于后续的父子组件数据传输有帮助。

2020-12-04