父子组件的通信--父传子

2020-07-21 本文已影响0人 63537b720fdb

一.回顾父子组件

子组件在父组件中注册并使用，在html中使用的是父组件的标签，子组件也会被展示。

1.不用语法糖的方式先创建父子组件的构造器

        <template id="cpn1">
            <div>
                <h2>子组件</h2>
            </div>
        </template>
        <template id="cpn2">
            <div>
                <h2>父组件</h2>
            </div>
        </template>

            /*子组件构造器*/
            const cpnC1 = Vue.extend({
                template:'#cpn1',
            })
            
            /*父组件构造器*/
            const cpnC2 = Vue.extend({
                template:'#cpn2'
            })

2.在父组件中注册并使用子组件
注册：

            /*父组件构造器*/
            const cpnC2 = Vue.extend({
                template:'#cpn2',
                /*注册子组件*/
                components:{
                    cpn1:cpnC1
                }
            })

使用：

        <template id="cpn2">
            <div>
                <h2>父组件</h2>
                <!--使用子组件-->
                <cpn1></cpn1>
            </div>
        </template>

3.在Vue实例中注册父组件

            /*根组件*/
            const app = new Vue({
                el:'#app',
                components:{
                    cpn2:cpnC2
                }
            })

4.在html中使用父组件

        <div id="app">
            <cpn2></cpn2>
        </div>

二、为何需要父子组件的通信

每个组件的数据都存放在自己的data函数中，不可以直接使用其他组件或Vue实例（根组件）中的data数据。
在开发时，页面中展示的数据都是通过网络请求获取而来的动态数据。因为每个组件都是独立存在，即每个组件中的数据都是独立存储的，那每个组件所需要的动态数据都是通过各自发送网络请求而获取来的吗？
由于组件化的思想，一个完整的页面可以根据功能划分成若干个组件，而这些组件也可以根据逻辑功能再次细分。所以一个页面是由许多个组件集成的。