vue事件總線取消了嗎

今天小編給大家分享一下vue事件總線取消了嗎的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

vue3取消了全局事件總線，廢除原因是安全性低。全局事件總線是一個全局任意組件通信技術(shù)，即任意組件間的通信均可實現(xiàn)。在vue3中，如果想要使用全局事件總線，需要引入第三方庫mitt或tiny-emitter。

vue3取消了全局事件總線，原因是安全性低。

vue的全局事件總線

全局事件總線，是一個全局任意組件通信技術(shù)。

顧名思義，任意組件間通信，均可實現(xiàn)。

它通信是通過一個傀儡去實現(xiàn)的，一個所有組件均可訪問到的傀儡，vue中命名叫 $bus

在vue2中

我們可以直接在 入口文件 mian.js 中使用生命周期鉤子 beforecreated
直接創(chuàng)建 $bus

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

記得把鉤子寫在 掛載之前即可。

使用時：

• 在需要接收數(shù)據(jù)的組件中使用 mounted鉤子綁定事件監(jiān)聽

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

• 在需要發(fā)送數(shù)據(jù)的組件中需要發(fā)送的操作中觸發(fā)該方法即可

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

• 還沒完，如果組件銷毀，記得解綁事件，在哪綁定就在哪解綁，使用beforeDestroy鉤子

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

在vue3

在vue3中，取消了全局事件總線，如果想要使用，我們需要引入第三方庫 mitt或tiny-emitter

1、安裝mitt庫

npm i mitt -s

2、在根目錄封裝一個 js 文件，以便組件中導(dǎo)入使用

文件起名最好見名知義 例如 eventBus.js

內(nèi)容：

//導(dǎo)入
import mitt from 'mitt';
 //定義,定義也最好見名知義
const emitter = mitt();
 //暴露
export default emitter;

3、使用

1）相互通信的組件均需要導(dǎo)入js

import emitter from '../../eventBus'

2） 接收數(shù)據(jù)的組件 在setup（）中綁定事件監(jiān)聽

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

這里的箭頭函數(shù)，換成普通函數(shù)也可

3）發(fā)送數(shù)據(jù)的組件觸發(fā)即可傳遞數(shù)據(jù)

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

4）組件銷毀前，解綁事件，

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

如果使用普通函數(shù)，則把該函數(shù)也在第二個參數(shù)的位置，如果是箭頭函數(shù)，則不用寫。如上 onEvent

以上就是“vue事件總線取消了嗎”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。