vue3取消全局性事件总线,废止主要原因是安全系数低

lxf2023-04-05 20:03:01

vue3取消全局性事件总线,废止主要原因是安全系数低。全局性事件总线是一个全局性随意部件通讯技术,即随意部件之间通讯都可完成。在vue3中,如果你想要应用全局性事件总线,必须引进第三方库mitt或tiny-emitter。

vue3取消全局性事件总线,废止主要原因是安全系数低

实例教程作业环境: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事件总线废止了没有的具体内容,大量欢迎关注AdminJS其他类似文章!