vue 复习-组件通信

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

image.png

props{
num:Number, //常见的类型 String||Boolean||Number
test：{
default:"abc"，//默认值
type：Number //类型约束
}
}
二、子传父
1.

on ('事件名',handeler(值))； 2.

emit("事件名"，值)
（this.

parent.

emit(事件名，值)）父组件

root 根组件 不管是

parent||

root还是其他的选择都是保证

emit调用和

on 监听的式同一个对象 总结：store(Demo父组件)：{getData：【fn1，fn2】} 在同一个对象中用对象的形式来存储 事件名：函数们

emit调用时取同一个对象store 中的事件名数组，遍历调用。
注：【同一个对象】中进行

on+

emit 才能通讯
三、深层次组件通信
同一个对对象
以前叫VueBus ，现在叫EventBus
Vue的实力具备

emit/

on 来做深层组件之间的桥梁
创建一个连接器Connector.js 在Connector内容：
import Vue from "vue";
export default new Vue();
在其他地方使用的时候直接替换原来的

this

this.parent 代替原来的实例
四、provide/inject(从祖宗到后代)
在父组件中：
provide（）{
return{
"a":123
}
},
在子组件中：
inject：["a",]
然后声明完就可以直接使用了；{{a}}；

1617787435(1).jpg

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。