vue组件通信

1 父组件向子组件通信

父组件向子组件通信就是将父组件的数据，方法传递给子组件
需要两步：

第一步 在父组件模板中，为子组件元素传递数据
		属性值默认是字符串，想传递变量或者方法，要使用v-bind指令动态传递
		命名规范：字母小写，横线分割单词
	第二步 在子组件中，接收数据或者方法
		在props属性中接收，有两种接收方式
			第一种 属性值是数组，每一个成员代表一个接收的属性名称
			第二种 属性值是对象
				key表示接收的属性名称	value有三种形式：
					可以是类型的构造函数：Number, String等
					可以是数组，每一个成员代表一种类型（定义多种类型）
					可以是对象：type表示类型的构造函数，required是否是必须的，default默认值，属性可								以是数据，属性值还可以是方法，返回值就是默认的数据。validator校验方								 法，在方法中，校验数据是否合法。
			注意：接收属性的时候，属性命名规范：驼峰式命名
		props中接收的数据与模型中的数据一样，都添加给实例化对象自身，并设置了特性
		因此我们即可以在JS中使用，也可以在模板中使用

第一步 在父组件模板中，为子组件元素传递数据
		属性值默认是字符串，想传递变量或者方法，要使用v-bind指令动态传递
		命名规范：字母小写，横线分割单词

<child color="red" num=100 :parent-msg="msg"></child>

// 接收数据
    // 接受的数据，添加给实例化对象自身并设置特性，因此我们可以在模板中直接使用
    // props: ['color', 'num', 'parentMsg'],
    // 约束类型
    props: {
        // num: Number,
        // 多种类型
        num: [Number, String],
        color: String,
        // parentMag: String
        // 更多限制
        parentMsg: {
            type: String,
            // 设置必须传递
            required: true,
            // 设置默认值
            // default: 'abc'
            default() {
                return 'abc'
            },
            // 校验
            validator(value) {
                return value.length >= 5
            }

        }
    },

2 子组件向父组件传递数据

子组件向父组件通信有两种常用方式：

• 第一种：模拟DOM事件

绑定DOM事件：v-on:click=“fn”
模拟DOM事件：v-on:demo=“fn” demo事件名称就是自定义事件名称
子组件向父组件通信
1 在父组件模板中，为子组件元素绑定子当以事件
消息名称：字母小写横线分割单词。注意：绑定事件的时候，不要添加参数集合
如果没有添加参数集合，可以接收所有的数据
如果添加了参数集合，不能接收数据，即使传递了$event也只能接收一条数据2在子组件中，通过$emit发布消息，并传递子组件中的数据
消息名称：字母小写横线分割单词。注意：这是唯一一个不需要做驼峰式命名转换的地方
3 在父组件事件回调函数中，接收数据并存储数据

父组件中
<!-- 1 绑定自定义事件 -->
<!-- 谁的模板使用的数据就是谁的，在父元素模板中绑定receiveMessage，因此receiveMessage是父元素的方法 -->
<!-- 绑定事件的时候，不要添加参数集合 -->
<child @ickt-demo="receiveMessage"></child>

子组件中
	在子组件中触发事件，将子组件中的msg数据传递给ickt-demo事件对应的回调函数receiveMessage
    created() {
        // 2发布消息 注意：这是唯一一个不需要做驼峰式命名转换的地方
        this.$emit('ickt-demo', this.msg)
    },

父组件中
父元素中的receiveMessage方法，在子组件中触发后，就可以接收到子组件中传递回来的msg,然后使用
    methods: {
        receiveMessage(msg) {
            // 存储数据
            this.msg = msg
        }
    },

• 第二种：传递属性方法

我们可以向子组件传递父组件方法，让子组件执行父组件方法并传递数据的形式，来实现通信
第一步 在父组件模板中，为子组件传递父组件中的方法
第二步 在子组件中，接收方法，执行方法并传递数据
第三步 在父组件的方法中，接收数据，并存储数据

<!-- 1 向子组件传递方法 -->
 <child :send-message="receiveMessage"></child>

第二步 在子组件中，接收方法，执行方法并传递数据
// 接收属性
props: ['sendMessage'],
created() {
        this.sendMessage(this.msg, 100, 200)
    },

第三步 在父组件的方法中，接收数据，并存储数据
    methods: {
        receiveMessage(msg, ...args) {
            // 存储数据
            this.msg = msg
        }
    },