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

一.回顾父子组件

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

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

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

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

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

使用：

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

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

4.在html中使用父组件

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

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

image.png

那每一个组件中的数据都通过发送网络请求获取，甚至连蓝色框的用来显示物品详情的小组件也要发送网络请求获取动态数据，这会让网络请求的压力巨增，所以这种获取数据的方式显然是不可能的。

所以这时候可以让大组件（父组件）传送数据给小组件（子组件）。

三、父子组件通信的方式

image.png

1.父组件通过props属性向子组件传送数据
2.子组件通过事件向父组件发送消息

四、父组件向子组件通信的方式

组件构造器cpnC2和Vue实例（根组件）也是父子组件关系。

image.png

若子组件需要获取父组件data中的message数据，可通过props属性获取。
props属性有很多种写法。
1.props

image.png

2.通过v-bind：动态绑定cmessage属性

image.png

3.在子组件的template中使用数据

image.png

image.png

通过props，子组件可以使用父组件传送过来的数据

四、子组件props的不同写法

props是对象类型

cmessage可以是个对象，对象中的属性可以限制父组件传递过来的数据
1.type：验证传递数据的类型
支持验证以下类型
String
Number
Boolean
Array
Object
Date
Function
Symbol

2.requierd：提示cmessage必须被传入

image.png

3.default：没有绑定cmessage，也就是父组件没有传递数据时，使用{{cmessage}}默认显示的数据

image.png

可参考以下写法：

image.png

props也可以是数组类型
绑定和使用过程和上述相同，只是当props是数组时，就缺少了验证以及一些默认的选项，所以数组类型的props不常用。