首页 > 其他 > 详细

Vue如何实现组件间通信?

时间:2020-08-22 20:06:10      阅读:81      评论:0      收藏:0      [点我收藏+]

一、子父间通信(props/$emit)

①父组件向子组件传参(props)

    父组件:

技术分享图片

 

 

 子组件:

技术分享图片

 

 总结:父组件通过props给子组件传递数据。

 

②子组件给父组件传递值($emit)

子组件:

技术分享图片

 

 

父组件:

技术分享图片

 总结:儿子组件向父组件传递数据的方式就是通过子组件内 $emit 触发自定义事件,子组件使用时 v-on 绑定监听自定义事件。

 

二、任意组件之间通信($emit 、$son)

EventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接受事件,项目比较小时,用这个比较合适;

实现方式:

event.$emit(eventName,[...args]);

event.$son(eventName,callback)

event.$emit(事件名,数据);
event.$son(事件名,data=>{})

main.js

挂载到vue原型上

 技术分享图片

 

 

技术分享图片

 

 技术分享图片

 

 技术分享图片

 

 

三、Vuex

创建一个数据仓库,整个项目全局都可以往这个仓库存放数据和读取数据。适合大项目中。

 

Vue如何实现组件间通信?

原文:https://www.cnblogs.com/babilong/p/13534469.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!