【前端学习】Vue的组件间通信

组件间通信：
Props：
1、props的类型可以是一个数组或对象。
2、子组件可以使用、绑定这个数组中的值。
3、Props在vue2中，数据的传递是单向的，即由父组件传给子组件，反过来不成立。
4、两种需要更改prop的情况：子组件希望使用父组件的传值作为初始值，并希望随意修改，可以在组件中的data中声明一个变量，然后将prop中的值赋给它，就可以随意修改了；子组件需要使用传入的值并修改，例如需要在style中将传入的width直接使用，可以在子组件中合适呢个名一个计算属性，style:function(){ return {width:width+”px”}}就可以直接设置宽度了。
5、props数据验证：

PropA：{//类型为数字，是必须的，若没有则赋值为0
type:Number,
required:true,
default:function(){return 0;}
}
propB:{//自定义验证
type:instanceof objectName
validator:function(value){
return value>10
}
}

组件间通信类型：
父子组件通信、兄弟组件通信，跨级组件通信。Props仅仅是从父组件到子组件的通信。

自定义事件：子组件用$emit()触发事件，父组件用$on()监听事件。子组件在事件处理中，使用$emit(“事件名称A”,传值…)触发,父组件中用v-on:increase（语法糖写法为@increase）来监听子组件触发的事件。另外v-on也可以监听DOM原生事件，但是需要添加“.native”，例如v-on:click.native

非父子间通信：
使用$dispatch():由下到上派发事件，使用$broadcast()由上到下广播事件，都可以在events选项内接收，都是就近原则，即都在第一次接收后停止冒泡。使用方法与emit相似，events中的声明如下。
Var app=new Vue(){
…

events:{
‘事件名称’:function(dispatch中传入的第二个参数以后的参数列表){
//函数体
}…
}

中央事件总线：在component中声明，var bus = new Vue()是一个空vue实例。所有的事件都由bus来发出，监听。比如在一个组件的事件处理函数中使用bus.$emit()方法发出时间，在另一个事件中使用bus.$on来监听这个事件，就能达到中介的作用。

父/子链：$parent，$children可以用来访问当前组件的父实例和子实例，可以递归直至根实例或者最内层组件。

子组件索引：统一用ref:“子组件名称”来为子组件定义索引