vue事件匯流排廢除了嗎

vue3取消了全域性事件匯流排，廢除原因是安全性低。全域性事件匯流排是一個全域性任意元件通訊技術，即任意元件間的通訊均可實現。在vue3中，如果想要使用全域性事件匯流排，需要引入第三方庫mitt或tiny-emitter。

本教學操作環境：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中，取消了全域性事件匯流排，如果想要使用，我們需要引入第三方庫 mitt或tiny-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

【相關推薦：、】

以上就是vue事件匯流排廢除了嗎的詳細內容，更多請關注TW511.COM其它相關文章！