Explain the sync modifier of Vue

  • 1. Instruction
  • 2. Modifier
  • 3. . sync modifier
  • 4. Summary

1. Instruction

Instructions are direct. Literally, I tell you what to do, that is, I send an instruction, and then the person receiving the instruction will do it. The instructions in Vue have a unified and easy to recognize format, that is, inv-The beginning is the instruction, such as:

< div v-text = "X" > < / div > // v-text specifies the label text instruction
< div v-on: Click = "add" > < div > // v-on event binding instruction

But not all instructions begin with V -. For some abbreviations, they are also instructions, such as

< img: SRC = "X" > < / img > // v-bind: short for SRC
< button @ Click = "add" > < / button > // v-on: short for Click

2. Modifier

Modifier is a syntax sugar closely related to the event processing instruction v-on in the instruction. The so-called syntax sugar is very sweet, simple and easy to use. In the programming world, it can help you do well, and only the simplest thing is left for you to do.

In event handlers, there are some very common requirements, such as event. Preventdefault() preventing default events and event. Stoppropagation() preventing event bubbling. Therefore, Vue will help us deal with the common requirements in the event processing process. Tell Vue when we need it, and it will automatically help us prevent default events, prevent event bubbles, etc. Then the way we tell Vue is the modifier provided by Vue, which is represented by the instruction suffix beginning with a dot

An example of the preventdefault method to prevent the click of the < a > tag from refreshing the page event by default is as follows:

Common practice

< a href = "" v-on: Click = "rel =" external nofollow "PE ($event)" > Vue click the link < / a > // Vue to access the original DOM event. You can pass it into the method with the special variable $event, which is event in the original HTML

// ... 
methods: {

Use modifiers

< a v-on: click. Prevent > Vue click the link < / a > // prevent modifier, which is equivalent to e.preventdefault() above

From the above small examples, we can see whether the modifier is a syntax sugar. It can help us write common requirements in advance. Just say it when you use it. When there is an event handler, you can directly continue to write later, as follows:

< a href = "" v-on: click. Prevent = "rel =" external nofollow "PP" > Vue click the link</a>
// ... 
methods: {
        Console.log ('Do not jump to page execution event ')

Modifiers are executed sequentially, such as v-on: click. Prevent = “PP” above, which means that when clicking, the blocking default event of the modifier prevent is executed first, and then the subsequent PP event processing function is executed.

Modifiers almost correspond to the relevant processing functions of event one by one. According to different events, modifiers corresponding to different events are divided into several categories as follows:

The source and meaning of modifiers are described above. As for the specific ones, you can go to the official website to find them. There are two most commonly used ones to remember, that is, @ click.stop is to prevent the event from bubbling, @ click.prevent is to prevent the default event, and @ keypress.enter is to press the key as the enter event.

3. . sync modifier

The. Sync modifier is relatively special because it is not the evolution of the original event processing related functions of event event, but a modifier defined by Vue. For example, in the above modifier classification,. Sync is also classified as a modifier of user-defined events. What event is this user-defined event?

This event corresponds to the eventbus event. Eventbus event is a mode in MVC. In short, it is the process of publishing and subscribing, that is, there are two parties. Party A is responsible for always listening to an event, Party B is responsible for triggering the event when necessary, and Party A will perform some operations when listening to the event. Party A is subscription, Party B is publishing, and both parties are publishing and subscription mode.

So when does this need to be used in Vue?

When Vue’s components accept external data props, Vue stipulates that after receiving external data through props, the sub components only have the right to use the data, but do not have the right to modify the attribute. Because if the child component modifies the externally transmitted data, the child component and the parent file using it can be changed. There is no obvious change source in the parent component and child component. In the end, we don’t know who changed the data, so the data is difficult to control. Therefore, Vue stipulates that the component can only use props attributes and cannot change them by itself. If it wants to change, it must notify the real owner of the data to change, that is, use the parent file of the component.

The notification method used is the eventbus publish and subscribe mode.

Do not use. Sync

The subcomponent triggers an event. The event name format must be update: mypropname, which is triggered by the $emit function

This. $emit ('update: title ', newtitle) // newtitle is the modified value of props data you want to modify

The parent component can listen for that event and update a local data attribute as needed

<myconponent :title="Ptitle" @update:title="Ptitle = $event" ></myconponent>
//Listen for this event in the parent component. The value passed after the event is triggered is received as $event, $event = = = newtitle, and ptitle is the data of the parent component

Or the parameters of the defined acceptance function

<myconponent :title="Ptitle" @update:title="val => Ptitle = val" ></myconponent>
//At this time, the received value is used as the parameter of the function

Using. Sync

The above process is very common in actual requirements. Therefore, Vue defines the listening of the parent component as a modifier during value transmission, which is. Sync. After using the. Sync modifier in the above code, it is:

Subcomponents (same)

this.$emit('update:title', newTitle)

Parent component

< mycomponent: title. Sync = "ptitle" > < / mycomponent > // equivalent to the above value passing and listening

Isn’t it sweet?

4. Summary

Usage rules for. Sync

1. The component cannot modify props external data

2. This. $emit can trigger events and pass parameters

3. $event can obtain the parameters of $emit

The above is the details of Vue’s sync modifier. For more information about Vue’s sync modifier, please pay attention to other related articles of developeppaer!

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]