vue 复习-组件通信

一、父传子
1.<子组件 v-bind:属性名="值">
2.子组件内props：['属性名']
弊端 ：父组件传递太麻烦=属性名
props:[]没有数据类型限制；
props:{属性名：值类型}

image.png
props{
num:Number, //常见的类型 String||Boolean||Number
test：{
default:"abc"，//默认值
type：Number //类型约束
}
}
二、子传父
1.emit("事件名"，值)
（this.emit(事件名，值)）父组件
parent||emit调用 和 emit调用时 取同一个对象store 中的事件名数组，遍历调用。
注： 【同一个对象】 中进行emit 才能通讯
三、深层次组件通信
同一个对对象
以前叫VueBus ，现在叫EventBus
Vue的实力 具备on 来做深层组件之间的桥梁
创建一个连接器Connector.js 在Connector内容：
import Vue from "vue";
export default new Vue();
在其他地方使用的时候直接 替换原来的this.parent 代替原来的实例
四、provide/inject(从祖宗到后代)
在父组件中 ：
provide（）{
return{
"a":123
}
},
在子组件中：
inject：["a",]
然后声明完就可以直接使用了；{{a}}；
1617787435(1).jpg