Vue 组件之间的控制

有2个组件,A组件和B组件,A组件中有一个播放器,并且添加了播放器的播放和停止事件,要求B组件的多个按钮点击也能让A组件的播放器播放,而且是每点击一个就会暂停上一个,立刻播放下一个

这个是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();
      }
这个是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='';
    },

有一个思路,因为用的是Vuex,点击B组件按钮用mutation提交修改state.xxx=true,A组件发现state的参数xxx=true然后执行播放,但是播放的函数不知道写在哪里

这是播放的函数
this.$refs.player.play()

写到created里面不行,因为A没有重新加载,写到A的methods里面不知道该用什么来触发,watch也试过,xxx不知道该在哪里设置为false,请给一个解决方法或一个思路,非常感谢。

阅读 2.4k
3 个回答

给你参考下我之前用过的方法吧:
A组件

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

            // 设置xxx为false
            this.$store.commit("updateXXX",false);
        },    
    },

vuex

updateXXX(state,val){
      state.xxx = val;
},

写一个自定义的events处理一下就行了,订阅者模式,A初始化的时候通过events监听某个事件,B通过events发起事件。

按理说watch应该是可以的,当改变的时候调用一下自身的methods来切换状态,顺便提交一个mutation把xxx改回来就行

其实就是组件的通讯两种方法

  1. event bus
  2. vuex
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题