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

【相關推薦：vuejs影片教學、web前端開發】

#

以上是vue事件總線廢除了嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！