鍍金池/ 問答/Python  HTML/ Vue 組件之間的控制

Vue 組件之間的控制

有2個(gè)組件，A組件和B組件，A組件中有一個(gè)播放器，并且添加了播放器的播放和停止事件，要求B組件的多個(gè)按鈕點(diǎn)擊也能讓A組件的播放器播放，而且是每點(diǎn)擊一個(gè)就會(huì)暫停上一個(gè)，立刻播放下一個(gè)

這個(gè)是A組件

 <img :src="start" alt="#" @click="changestart" class="seta">


 changestart() {
      if (this.start == "../../static/pic/start.png") {
        this.start = "../../static/pic/stop.png";
        this.$refs.player.play();
      } else {
        this.start = "../../static/pic/start.png";
        this.$refs.player.pause();
      }
這個(gè)是b組件，也添加了click事件，還有其他功能
<li v-for="(songNamelist,songIndex) in songName" v-bind:key="songIndex" class="songlist" @click="songChoose(songIndex,'/play')">

    songChoose(songIndex,z) {
      this.$router.replace(z)
      this.isresearch = false;
      this.ishow=false;
      this.keyword='';
    },

有一個(gè)思路，因?yàn)橛玫氖荲uex，點(diǎn)擊B組件按鈕用mutation提交修改state.xxx=true，A組件發(fā)現(xiàn)state的參數(shù)xxx=true然后執(zhí)行播放，但是播放的函數(shù)不知道寫在哪里

這是播放的函數(shù)
this.$refs.player.play()

寫到created里面不行，因?yàn)锳沒有重新加載，寫到A的methods里面不知道該用什么來觸發(fā)，watch也試過，xxx不知道該在哪里設(shè)置為false，請(qǐng)給一個(gè)解決方法或一個(gè)思路，非常感謝。

回答
編輯回答
逗婦惱

其實(shí)就是組件的通訊兩種方法

  1. event bus
  2. vuex
2018年2月8日 22:13
編輯回答
兔寶寶

寫一個(gè)自定義的events處理一下就行了，訂閱者模式，A初始化的時(shí)候通過events監(jiān)聽某個(gè)事件，B通過events發(fā)起事件。

按理說watch應(yīng)該是可以的，當(dāng)改變的時(shí)候調(diào)用一下自身的methods來切換狀態(tài)，順便提交一個(gè)mutation把xxx改回來就行

2017年10月23日 14:17
編輯回答
任她鬧

給你參考下我之前用過的方法吧：
A組件

    computed: {
        changeXxx(){
            return this.$store.state.xxx; 
        },
    },
    watch: {
        changeXxx(val){
            // 開始播放
            this.$refs.player.play();

            // 設(shè)置xxx為false
            this.$store.commit("updateXXX",false);
        },    
    },

vuex

updateXXX(state,val){
      state.xxx = val;
},
2018年3月16日 03:46