Event triggering between vue sibling components (detailed explanation)

Go straight to the topic!

The general idea of ​​event triggering between brother components is to exchange data through the parent component and watch to listen for triggering events.

The scenario is that the parent component A refers to two child components B and C at the same time. Click the button in component B to execute the events in component C.

Step 1: Parent component A

<bottom-play :play="playStatus" @playStatus="btmChild"></bottom-play> 
   
 methods:{ 
 listChild:function(val){//B component custom event status is a boolean value   = val; 
  }, 
 btmChild:function(val){//C component custom events     = val; 
  } 
} 

Step 2: Child Component B Code

props: ['play'],//Accept data passed by the parentwatch:{// Listen to data If you change the audioPlay function, audioPlay is defined in methods  play:'audioPlay' 
} 
audioPlay：function(){ 
 this.$emit('playStatus',false);//Pass parameters to parent component} 

Step 3: Child Component C Code

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

The summary is that component A defines two values ​​to pass to B and C respectively. Then, the B and C component watch method listen to the data trigger event.

The above article is based on event triggering between vue brother components (detailed explanation) which is all the content I share with you. I hope you can give you a reference and I hope you can support me more.