Based on Event triggering between vue sibling components (detailed description), vue triggering

Based on Event triggering between vue sibling components (detailed description), vue triggering

Go straight to the topic!

An event is triggered between sibling components. The general idea is to exchange data with parent components, and watch is used to listen for trigger events.

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

Step 1: parent component

<Bottom-play: play = "playStatus" @ playStatus = "btmChild"> </bottom-play> methods: {listChild: function (val) {// The Custom Event status of component B is Boolean this. playStatus = val ;}, btmChild: function (val) {// custom event of the C component this. btmStatus = val ;}}

Step 2: Child-level component B code

Props: ['play'], // receives the data transmitted by the parent-level watch: {// If the listening data changes and the audioPlay function is executed, audioPlay defines play in methods: 'audioplay'} audioPlay: function () {this. $ emit ('playstatus', false); // pass parameters to the parent component}

Step 3: sublevel component C code

Props: ['btmstatus'], watch: {btmStatus: 'playlist '}

In summary, component A defines two values that are passed to component B and component C respectively. Then, B and C components listen to the data trigger event in the watch method.

The above event Trigger Based on the vue sibling components (detailed description) is all the content shared by Alibaba Cloud. I hope you can give us a reference and support for the customer's house.