Control between Vue components

there are two components, component An and component B, and there is a player in component A, and the playback and stop events of the player are added, which requires that multiple buttons of component B can also be clicked to allow the player of component A to play. and each click will pause the previous one and immediately play the next

. 
A

 <img :src="start" alt="-sharp" @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();
      }
bclick
<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="";
    },

there is an idea, because Vuex, clicks the B component button and uses mutation to submit and modify state.xxx=true,A components to find the parameter xxx=true of state and then perform playback, but the playback function does not know where to write 


this.$refs.player.play()

cannot be written into created, because A has not been reloaded. I don"t know what to trigger when written to A"s methods. Watch has also tried. Xxx does not know where to set it to false,. Please give me a solution or an idea. Thank you very much.

Vuex vue.js javascript
Apr.08,2021

Let me give you a reference to the method I used before:
A component 

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

            // xxxfalse
            this.$store.commit("updateXXX",false);
        },    
    },

vuex 

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

just write a custom events to handle it, subscriber mode, A listens for an event through events during initialization, and B initiates an event through events.

in theory, watch should be OK. When you change, call your own methods to change the state, and submit a mutation to change the xxx back.

is actually two methods of component communication

  1. event bus
  2. vuex

Previous: How to use input type= "file" to choose the path to download locally?

Next: How to set the number of words to display for a long column of data in element ui.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b30c49-2bd25.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b30c49-2bd25.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?