Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "Vue3 event handling and modifier instance analysis", the content is detailed, the steps are clear, the details are handled properly, I hope this "Vue3 event handling and modifier instance analysis" article can help you solve your doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

Basic event handling

Using the v-on directive (@ for short), we can listen for DOM events and run handler methods or inline Javascript.

/ / v-on directive / / OR issues custom events to the parent component

A common use case in any Web framework is to expect child components to emit events to their parent components, which is also the principle of two-way data binding.

A common example is to send data from the input component to the parent form.

The syntax for emitting events is different depending on whether we are using Options API or Composition API.

In Options API, we can simply call this.$emit (eventName, payload). The example is as follows:

Export default {methods: {handleUpdate: () = > {this.$emit ('update',' Hello World')}

However, Composition API is used differently. You need to use the emit method in the setup method provided by Vue3.

As long as you import the context object, you can call emit with the same parameters as Options API.

Export default {setup (props, context) {const handleUpdate = () = > {context.emit ('update',' Hello World')} return {handleUpdate}

Of course, I often use deconstruction in projects:

Export default {setup (props, {emit}) {const handleUpdate = () = > {emit ('update',' Hello World')} return {handleUpdate}

Perfect!

Whether we use Options or Composition API, the parent group listens in the same way.

First, we can use $event in the template to access the passed value.

If there is a passing value in the component emit outbound method, we can capture it in two different ways, depending on whether we use inline or method.

The first is to use $event in the template to access the passed value.

Second, if you use the method to handle the event, the value passed will be automatically passed to our method as the first parameter.

/ /... Methods: {inputUpdated: (value) = > {console.log (value) / / WORKS TOO}} mouse modifier

The following is a list of major DOM mouse events that we can capture in the v-on directive:

Interact with Me!

For click events, we can also add mouse event modifiers to restrict which mouse button will trigger our event. There are three: left,right and middle.

Left keyboard modifier

We can listen to three DOM keyboard events:

Typically, we want to detect these events on a key, and there are two ways to do this.

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Keycodes

Vue has aliases for certain keys (enter, tab, delete, esc, space, up, down, left, right)

System modifier

For some projects, we may only want to trigger the event when the user presses the modifier key. Modifier keys are similar to Command or shift.

In Vue, there are four system modifiers.

Shift

Alt

Ctrl

Meta (CMD on mac, Windows on Windows)

This is useful for creating features such as custom keyboard shortcuts in Vue applications.

In the Vue document, there is also an exact modifier to ensure that the event is triggered only if the key we specify is pressed and there are no other keys.

Event modifier

For all DOM events, we can use some modifiers to change how they operate. Vue has two built-in DOM event modifiers whether to stop propagation or block the default action.

After reading this, the article "event handling and modifier instance Analysis of Vue3" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.