VUE之组件（组件通信、单向数据流）

组件通信

我们已经知道，从父组件向子组件通信，通过 props 传递数据就可以了，但 Vue 组件通信的场景不止有这一种，归纳起来，组件之间通信可以用下图表示。

单向数据流

单向数据流是父子组件的核心概念，props是单向绑定的。
当父组件的属性发生变化的时候，会传导到子组件。但是反之，为了防止子组件无意间修改来父组件的状态，从下往上的数据流是不允许的。
当父组件属性改变时，会传进子组件。而子组件的属性改变时，会报错。

这样的话可能觉得props有点鸡肋，只能初始化组件的时候用，在子组件内并不能进行操作。其实还是有两种办法去操作props的：
1.定义一个局部变量，并用props初始化它，以后操作这个局部变量。
2.定义一个计算属性，处理props的值并返回。

自定义事件

了解了组件对单向数据流，我们知道了组件从上至下是通过prop传递进行通信的。那从下往上怎么办呢？
vue规定子组件通过触发事件来与父组件进行通信。即父组件在调用子组件时，定义事件，子组件通过触发这个事件来与父组件进行通信。

子组件→父组件
当子组件需要向父组件传递数据时，需要用到自定义事件。
Vue 组件有一套观察者模式，子组件用 $emit()来触发事件，父组件用$on()来监听子组件的事件。
语法结构：
父组件通过v-on:eventName="parentEventName"来设置监听
子组件通过$.emit(‘eventName’)来触发事件

下面小编来举个例子：

//html代码如下
<div id="demo">
			父组件数据：{{number}}
			<!-- 父组件通过v-on:eventName="parentEventName"来设置监听v-on简写为： -->
			<my-aaa :num="number" @shi-jian="bbFn"></my-aaa>			
</div>
//js代码如下
Vue.component('my-aaa',{
			props:['num'],
			// 模板也是子组件
			template:`
				<button @click="jia">子组件点击次数{{ziNumber}}</button>`,
			data(){
				return{
					ziNumber:this.num					
				}
			},
			methods:{
				jia(){
					this.ziNumber++;
					<!-- 子组件通过$.emit('eventName')来触发事件 -->
					this.$emit("shi-jian",this.ziNumber)
				}
			}		
		})		
		var demo=new Vue({
			el:"#demo",
			data:{
				number:6
			},
			methods:{
				bbFn(canshu){
					console.log(canshu)
					this.number = canshu;
				}
			}
		})

这个案例就是点击子级父级也会触发事件，这就是自定义事件