欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue全局事件總線$bus安裝與應(yīng)用小結(jié)

 更新時(shí)間：2022年09月09日 09:12:47   作者：codnan  
這篇文章主要介紹了Vue全局事件總線$bus安裝與應(yīng)用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1.什么是全局事件總線

一種組件間通信的方式，適用于任意組件間通信。

2.安裝

在main.js里安裝全局事件總線：

new Vue({
    ......
    beforeCreate(){
        //安裝全局事件總線，$bus就是當(dāng)前應(yīng)用的vm
        Vue.prototype.$bus=this
    }
    ......
})

3.使用

使用全局事件總線：

1.接收數(shù)據(jù)：A組件想接收數(shù)據(jù)，則要在A組件中給$bus綁定自定義事件，事件的回調(diào)留在A組件自身。

methods(){
    //事件的回調(diào)，用來(lái)接收數(shù)據(jù)
	demo(data){
        ……
    }
}
……
mounted(){
    //必須要在mounted中綁定自定義事件,xxx為自定義事件的名稱，this.demo為事件回調(diào)
	this.$bus.$on(‘xxx',this.demo)
}

2.提供數(shù)據(jù)：B組件要給A組件傳遞數(shù)據(jù)，就要觸發(fā)A組件中的自定義事件并攜帶要傳遞的數(shù)據(jù)

this.$bus.$emit(‘xxx',數(shù)據(jù))

4.銷毀

最好在beforeDestory的狗子函數(shù)中，用$off去解綁當(dāng)前組件所用到的事件

//在A組件中，組件銷毀之前解綁事件
beforeDestory(){
    this.$bus.$off('xxx')
}

完整版示例：

到此這篇關(guān)于Vue全局事件總線$bus安裝與應(yīng)用的文章就介紹到這了,更多相關(guān)Vue全局事件總線內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論