详谈vue组件间事件派发与接收
发布在前端JavaScript开发2018年12月31日view:171数据结构和算法React NativeReactDockerSocket.iovueCharlesfatj's插件PhillyHTTPS369Cloudmobile-angular-ui独立开发者
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

在vue的开发中,经常会在两个组件间进行事件的通信 在vue1.0中我们使用$dispatch 和 $broadcast

child.vue:

this.$dispatch('eventName',this.data);

parent.vue:

event:{
 'eventName':function(data) {
 // 执行的方法
 }
}

但是在vue2.0中$dispatch 和 $broadcast被弃用,因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱,并且这只适用于父子组件间的通信。官方给出的最简单的升级建议是使用集中的事件处理器,而且也明确说明了 一个空的vue实例就可以做到,因为Vue 实例实现了一个事件分发接口 image.png 在vue2.0中在初始化vue之前,给data添加一个 名字为eventhub 的空vue对象

new Vue({
 el: '#app',
 router,
 render: h => h(App),
 data: {
 eventHub: new Vue()
 }
})

某一个组件内调用事件触发

this.$root.eventHub.$emit('eventName', event.target);

另一个组件内调用事件接收, 在组件销毁时接除事件绑定,使用$off方法 介绍一个全栈开发交流学习圈,欢迎加入Q群:864305860

created() {
 this.$root.eventHub.$on('eventName',(target) => {
 this.functionName(target)
 });
},
method:{
 functionName(target) {
 console.log(target);
 }
}

了解更多 本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。 对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。 最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论
发表评论
暂无评论
WRITTEN BY
前端攻城小牛
你所谓的稳定不过是在浪费生命
TA的新浪微博
PUBLISHED IN
前端JavaScript开发

enter code here往前端这条不归路再次迈进

我的收藏