世界速讯:vue事件总线废除了吗

时间:2022-12-28 17:59:12       来源:PHP中文网

本教程操作环境:windows7系统、vue3版,DELL G3电脑。

vue3取消了全局事件总线,原因是安全性低。

vue的全局事件总线

全局事件总线,是一个全局任意组件通信技术。


(相关资料图)

顾名思义,任意组件间通信,均可实现。

它通信是通过一个傀儡去实现的,一个所有组件均可访问到的傀儡,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-emitter

1、安装mitt库

npm i mitt -s
登录后复制

2、在根目录封装一个 js 文件,以便组件中导入使用

文件起名最好见名知义 例如 eventBus.js

内容:

//导入import mitt from "mitt"; //定义,定义也最好见名知义const emitter = mitt(); //暴露export default emitter;
登录后复制

3、使用

1)相互通信的组件均需要导入js

import emitter from "../../eventBus"
登录后复制

2) 接收数据的组件 在setup()中绑定事件监听

setup(){  emitter.on("event",(info) => {    ...  })  return{}}
登录后复制

这里的箭头函数,换成普通函数也可

3)发送数据的组件触发即可传递数据

setup(){function send(info) {emitter.emit("event",info))return{}}
登录后复制

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

onBeforeUnmount(()=>{emitter.off("event", onEvent);})
登录后复制

如果使用普通函数,则把该函数也在第二个参数的位置,如果是箭头函数,则不用写。如上 onEvent

【相关推荐:vuejs视频教程、web前端开发】

以上就是vue事件总线废除了吗的详细内容,更多请关注php中文网其它相关文章!

关键词: 事件监听 发送数据 生命周期