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

在長(zhǎng)洲等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作專業(yè)公司,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),成都營(yíng)銷網(wǎng)站建設(shè),外貿(mào)網(wǎng)站建設(shè),長(zhǎng)洲網(wǎng)站建設(shè)費(fèi)用合理。

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

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

vue的全局事件總線

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

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

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

在vue2中

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

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

記得把鉤子寫(xiě)在 掛載之前即可。

使用時(shí)：

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

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

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

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

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

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

在vue3

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

1、安裝mitt庫(kù)

npm i mitt -s

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

文件起名最好見(jiàn)名知義 例如 eventBus.js

內(nèi)容：

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

3、使用

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

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

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

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ù)也在第二個(gè)參數(shù)的位置，如果是箭頭函數(shù)，則不用寫(xiě)。如上 onEvent

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