Vue3 common modifier

A common event modifier in VUe3

Event modifiers in VUe3 are the same as in VUe2… Let’s go over the usual ones here

(1).stop: prevent bubbling (in layman’s terms, prevent events from being passed to the parent DOM element)

.stop

<div @click.stop="doS"> </div> '(2). Prevent: Use the ". Prevent "modifier to prevent default events that automatically occur when operations on the DOM are performed, such as redirecting the page when a hyperlink is clicked or reloading the page when a form submission button is clicked. (3).capture: When bubbles occur, the dom elements with the modifier will be executed first, and if there are more than one, they will be executed from outside to inside, and then the triggered events will be executed in the natural order. (4). Self: binds the event to itself, which can be triggered only by itself, usually used to avoid the influence of bubbling events. (5). (6). Passive: This modifier is used to optimize the performance of the DEFAULT EVENTS in the DOM, as shown in the official website example, such as scrolling beyond the maximum range of the scroll bar.Copy the code

(7). Native: Binding a native event to the parent component turns the child component into a normal HTML tag, which is untouchable without adding a ‘. Native ‘event.