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

vue組件中傳值EventBus的使用及注意事項說明

 更新時間:2020年11月16日 09:09:19   作者:Cassie、  
這篇文章主要介紹了vue組件中傳值EventBus的使用及注意事項說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

主要想說下非父子組件之間的通信。

項目場景:

在app.vue里寫了一個公共的頂部導(dǎo)航navbar,然后右側(cè)有個分享按鈕,而這個分享按鈕只有在特定的頁面才展示,項目里是在lottery.vue頁面,然后想實(shí)現(xiàn)app.vue里點(diǎn)擊分享按鈕,觸發(fā)lottery.vue里的分享方法。

解決:使用eventBus

1、創(chuàng)建一個event-bus.js

import Vue from 'vue'

export const EventBus = new Vue()

2、在app.vue引入eventbus,點(diǎn)擊分享按鈕時觸發(fā)方法

import { EventBus } from '@/tools/event-bus'
 
onClickRight () {
  EventBus.$emit('handleLotteryShare')
}

3、在lottery.vue引入eventBus,在mounted里監(jiān)聽

import { EventBus } from '@/tools/event-bus'
 
mounted () {
  EventBus.$on('handleLotteryShare', () => {
   this.doShare()
  })
 },

4、到此解決了。但是,但是,出bug了,每多點(diǎn)擊一次,分享的彈窗的蒙層顏色就更深一層。然后一頭霧水,以為是原生app里api的bug,跑去問他們,結(jié)果尷尬了,并不是,而是調(diào)了多次分享接口。

然后就發(fā)現(xiàn)應(yīng)該跟eventBus有關(guān),上網(wǎng)搜索了下,原來eventBus用完要記得解綁。加上以下代碼解決了。

created () {
  // 解綁bus
  EventBus.$off('handleLotteryShare')
}

使用eventBus注意事項:要記得解綁??!EventBus.$off('handleLotteryShare')。

補(bǔ)充知識:vue前端兄弟組件或任意兩個組件之間進(jìn)行傳值可以使用eventbus

具體使用流程如下:

1、定義一個js文件,引入Vue

2、在需要使用eventbus的組件中引入步驟1創(chuàng)建的js文件

bus.$emit進(jìn)行傳值

3、在另一個組件中使用bus.$on進(jìn)行接收

其中,msg即為步驟2中emit攜帶的參數(shù)“123”

以上這篇vue組件中傳值EventBus的使用及注意事項說明就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論