主頁 > 知識庫 > 基于vue 兄弟組件之間事件觸發(fā)(詳解)

基于vue 兄弟組件之間事件觸發(fā)(詳解)

熱門標(biāo)簽:南京外呼系統(tǒng)租用 高德地圖標(biāo)注生成 濟(jì)南電銷外呼防封卡怎么樣 電銷外呼系統(tǒng)違規(guī) 400電話辦理2273649Z空間 智能語音外呼系統(tǒng)打電話 怎樣在地圖標(biāo)注自己的信息 400電話怎么申請收費(fèi)標(biāo)準(zhǔn) 寧夏外呼系統(tǒng)方案

直奔主題!

兄弟組件之間的事件觸發(fā),大概思路是通過父級組件交換數(shù)據(jù),watch來監(jiān)聽觸發(fā)事件。

場景是父級組件A同時(shí)引用兩個(gè)子級組件B,C。點(diǎn)擊B組件中的按鈕執(zhí)行C組件中的事件。

第一步:父級組件A

bottom-play :play="playStatus" @playStatus="btmChild">/bottom-play> 
   
 methods:{ 
 listChild:function(val){//B組件自定義事件 狀態(tài)是布爾值 
  this.playStatus = val; 
  }, 
 btmChild:function(val){//C組件自定義事件 
    this.btmStatus = val; 
  } 
} 

第二步:子級組件B代碼

props: ['play'],//接受父級傳遞的數(shù)據(jù) 
watch:{//監(jiān)聽數(shù)據(jù) 如果改變執(zhí)行audioPlay函數(shù),audioPlay在methods中定義 
  play:'audioPlay' 
} 
audioPlay:function(){ 
 this.$emit('playStatus',false);//向父級組件傳遞參數(shù) 
} 

第三步:子級組件C代碼

props: ['btmStatus'] 
,watch:{ 
  btmStatus:'playList' 
} 

總結(jié)就是A組件定義兩個(gè)值分別傳遞給B,C。然后B,C組件watch方法監(jiān)聽數(shù)據(jù)觸發(fā)事件。

以上這篇基于vue 兄弟組件之間事件觸發(fā)(詳解)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

您可能感興趣的文章:
  • vue中的$emit 與$on父子組件與兄弟組件的之間通信方式
  • vue2.0 兄弟組件(平級)通訊的實(shí)現(xiàn)代碼
  • Vue 兄弟組件通信的方法(不使用Vuex)
  • vue2.0s中eventBus實(shí)現(xiàn)兄弟組件通信的示例代碼
  • Vue.js中兄弟組件之間互相傳值實(shí)例
  • Vuejs 用$emit與$on來進(jìn)行兄弟組件之間的數(shù)據(jù)傳輸通信
  • vue中子組件調(diào)用兄弟組件方法

標(biāo)簽:潛江 惠州 茂名 貴港 唐山 平頂山 長白山 仙桃

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《基于vue 兄弟組件之間事件觸發(fā)(詳解)》,本文關(guān)鍵詞  基于,vue,兄弟,組件,之間,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《基于vue 兄弟組件之間事件觸發(fā)(詳解)》相關(guān)的同類信息!
  • 本頁收集關(guān)于基于vue 兄弟組件之間事件觸發(fā)(詳解)的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章