十九、Vue组件化开发-一看就懂的详解父子组件数据通信之父传子

每一个组件都有自己的属性与方法，父子组件中的数据无法相互使用。Vue组件中，data必须是一个函数其必须有一个返回值，且该返回值必须是一个对象。

组件无法直接访问Vue实例中的data数据，同理父子组件也是如此

下面通过案例来演示组件之间数据无法相互使用。

<div id="app">
    <child></child>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            ptitle:'我是父组件的标题'
        },
        components:{
            // 子组件
            child: {
                template:`<div>{{ pptitle }}</h2><p>我是子组件的内容</p></div>`,
                data:function(){
                    return {}
                }
            },
        }
    });
</script>

1）上述案例，在Vue实例中定义了一个局部组件child，该组件有自己的数据、属性、方法等；

2）在child子组件中使用父组件（也就是Vue实例，即根组件）的ptitle，此时，子组件是无法访问父组件的数据的，且报错，如下

vue.js:616 [Vue warn]: Property or method "ptitle" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

3）我们需要在子组件中使用父组件的数据，该怎么办？父组件将其数据传给子组件。

父组件通过props属性将数据传递给子组件

父组件将数据传递给子组件需要注意的事项：

1）父传子，通过props属性将数据传递给子属性

2）props定义在子组件中，格式为 props:自定义子组件变量名，（此格式为简单的举例说明，props接收的类型有很多）

3）视图上使用子组件时，在子组件身上通过v-bind:自定义子组件变量名="父组件中需要传递的数据变量名"将数据传递的子组件；

4）子组件模板中必须含有一个根组件

下面通过案例演示：

<div id="app">
    <!-- v-bind:pptitle绑定属性名与子组件中的数据变量名一致 -->
    <!-- ptitle为父组件的数据-->
    <child v-bind:pptitle="ptitle"></child>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
          ptitle:'我是父组件的标题'
        },
        components:{
            // 子组件
            child: {
                // 1）子组件内通过props属性接收父组件传递来的数据
                // 2）pptitle为子组件内定义的数据变量名
                // 3）该pptitle变量名需要使用使用组件时v-bind绑定属性一致
                props:['pptitle'],
                template:`<div><h1>{{ pptitle }}</h1>我是子组件的内容</div>`,
                data:function(){
                    return {}
                }
            },
        }
    });
</script>

总结：父组件传数据给子组件，子组选渲染时，通过在子组件本身使用v-bind绑定将父数据传递子组件；子组件中通过props属性接收来自父组件的火数据。

父向子传递数据，数据的类型

传递的数据类型有String、Number、Boolean、Array、Object、Date、Function、Symbol

<div id="app">
    <child v-bind:pptitle="ptitle" :author="author"></child>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            ptitle:'我是父组件的标题',
            author:"小白",
        },
        components:{
            child: {
                props:{
                    pptitle: {
                        // 类型必须是字符串
                        type:String
                    },
                    author:{
                        type:String,
                        default:'自如初'
                    }
                },
                template:`<div><h1>{{ pptitle }}</h1><b>{{author}}</b>我是子组件的内容</div>`,
                data:function(){
                    return {}
                }
            },
        }
    });
</script>

上述案例中，父组件向子组件所传的数据必须是字符串类型；除了验证之外还可以使用默认值，如当父组件没有给子组件传递author时，那么子组件就会显示它所定义的默认值。

<!--author显示子组件中的默认值-->
<child v-bind:pptitle="ptitle" :author="author"></child>

2020-12-05