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