博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
详谈vue组件间事件派发与接收
阅读量:7114 次
发布时间:2019-06-28

本文共 753 字,大约阅读时间需要 2 分钟。

在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); }}

转载地址:http://vsmhl.baihongyu.com/

你可能感兴趣的文章
Spark Streaming:大规模流式数据处理
查看>>
解决Spring Cloud中Feign/Ribbon第一次请求失败的方法
查看>>
Elasticsearch——分页查询From&Size VS scroll
查看>>
Spring Boot 配置Redis
查看>>
Eclipse快捷键
查看>>
JEESNS开源社交系统V0.5发布
查看>>
提取网页中的链接并生成xml
查看>>
ArrayList详解,看这篇就够了
查看>>
HTML-标签手册
查看>>
Solaris 操作系统中如何使用r命令集(rlogin、rcp、rsh)
查看>>
TCP/IP有限状态机
查看>>
男人应该多吃的10种健康食物
查看>>
ecshop导出会员邮箱
查看>>
Thinkphp学习笔记之---Thinkphp一个站点多个项目部署
查看>>
java.lang.OutOfMemoryError: PermGen space及其解决方法
查看>>
离开通讯业入职互联网圈的一些感悟
查看>>
C++拷贝构造函数详解
查看>>
rpm错误:can’t create transaction lock on
查看>>
php中print_r、var_dump和var_export几个函数的用法区别
查看>>
新职员到岗
查看>>