How to use event modifier .stop in Vue to stop event bubbling

Event bubbling means that when an element triggers an event, the event will bubble up from the element to the root node of the element, triggering the event processing functions of all passing parent elements. Sometimes we need to control the triggering of events and only handle the events of the current element and not the events of its parent element. Vue provides the event modifier ".stop" to stop event bubbling. This article will introduce in detail how to use the event modifier ".stop" in Vue to stop event bubbling.

In Vue, event modifiers are instructions ending with ".", which can be used to control the default behavior of events or implement special event processing. The structure of an event modifier is as follows:

@event.modifier="method"

where "event" is the event name, "modifier" is the event modifier, and "method" is the callback function The name. When using the event modifier ".stop", you can add it to the end of the event name:

@event.stop="method"

In this way, when the element triggers the event, the event will not bubble to its parent element node, but stop at the current element node.

The following is a specific example. Suppose we have a Vue component containing a nested list. Each list item is a clickable button. When the user clicks a button, a module needs to pop up. status box to display detailed information about the item. At this time we need to use the event modifier ".stop" to prevent the click event from bubbling:

template:`
ff6d136ddc5fdfeffaf53ff6ee95f185

<li v-for="item in items" :key="item.id">
  <button @click.stop="showModal(item)">Show Details</button>
  <div v-if="item.id===selectedItemId">{{item.details}}</div>
  <ul v-if="item.children.length>0">
    <child-list :items="item.children"></child-list>
  </ul>
</li>

929d1f5ca49e04fdcb27f9465b944689
`,
methods:{
showModal(item){

this.selectedItemId=item.id;
// show modal

}
}

In the above code, when the user clicks a button , the showModal method will be triggered and the id of the item will be passed to the method. At the same time, the event modifier ".stop" is added to prevent the event from bubbling, ensuring that only the click event of the current button is triggered and does not bubble to its parent element.

In general, it is very simple to use the event modifier ".stop" in Vue to stop event bubbling. You only need to add ".stop" after the event name. By mastering Vue's event modifier mechanism, we can more precisely control the behavior of various events and bring a better user experience to our applications.

The above is the detailed content of How to use event modifier .stop in Vue to stop event bubbling. For more information, please follow other related articles on the PHP Chinese website!