分享更有价值
被信任是一种快乐

vue事件总线取消了吗

文章页正文上

今天小编给大家分享一下vue事件总线取消了吗的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。 vue3取消了全局事件总线,废除原因是安全性低。全局事件总线是一个全局任意组件通信技术,即任意组件间的通信均可实现。在vue3中,如果想要使用全局事件总线,需要引入第三方库mitt或tiny-emitter。vue3取消了全局事件总线,原因是安全性低。全局事件总线,是一个全局任意组件通信技术。顾名思义,任意组件间通信,均可实现。它通信是通过一个傀儡去实现的,一个所有组件均可访问到的傀儡,vue中命名叫 $bus在vue2中我们可以直接在 入口文件 mian.js 中使用生命周期钩子 beforecreated
直接创建 $bus

beforeCreate(){
	Vue.prototype.$bus=this
}

记得把钩子写在 挂载之前即可。使用时:在需要接收数据的组件中使用 mounted钩子绑定事件监听

mounted(){
this.$bus.$on('hello',(data)=>{
console.log(data);
})
},

在需要发送数据的组件中需要发送的操作中触发该方法即可

methods:{
sendStudentName(){
this.$bus.$emit('hello',this.name)
}
},

还没完,如果组件销毁,记得解绑事件,在哪绑定就在哪解绑,使用beforeDestroy钩子

beforeDestroy(){
this.$bus.$off('hello')
},

在vue3在vue3中,取消了全局事件总线,如果想要使用,我们需要引入第三方库 mitttiny-emitter1、安装mitt库

npmimitt-s

2、在根目录封装一个 js 文件,以便组件中导入使用文件起名最好见名知义 例如 eventBus.js内容:

//导入
importmittfrom'mitt';
//定义,定义也最好见名知义
constemitter=mitt();
//暴露
exportdefaultemitter;

3、使用1)相互通信的组件均需要导入js

importemitterfrom'../../eventBus'

2) 接收数据的组件 在setup()免费云主机、域名中绑定事件监听

setup(){
emitter.on('event',(info)=>{
...
})
return{}
}

这里的箭头函数,换成普通函数也可3)发送数据的组件触发即可传递数据

setup(){
	functionsend(info){
		emitter.emit('event',info)
	)
	return{}
}

4)组件销毁前,解绑事件,

onBeforeUnmount(()=>{
	emitter.off("event",onEvent);
})

如果使用普通函数,则把该函数也在第二个参数的位置,如果是箭头函数,则不用写。如上 onEvent以上就是“vue事件总线取消了吗”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注云技术行业资讯频道。

相关推荐: 怎么创建Vue.js中的单文件组件

本篇内容主要讲解“怎么创建Vue.js中的单文件组件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么创建Vue.js中的单文件组件”吧! 什么是单文件组件Vue.js中的单文件组件将HTML,CSS和JavaSc…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册