Detailed explanation of Vue's sync modifier

1. Instructions

An instruction is a directive. From the literal meaning, it means I tell you what to do. It is like sending an instruction, and then the person receiving the instruction just has to do it. Instructions in Vue have a unified and easy-to-recognize format, that is, instructions start with v- , 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 start with v-. Some abbreviations are also instructions, such as

<img :src="x"> </img> //shorthand for v-bind:src <button @click="add"> </button> //shorthand for v-on:click

2. Modifiers

The modifier is a syntactic sugar closely related to the event handling instruction v-on in the instruction. The so-called syntactic sugar is very sweet, simple and easy to use. In the programming world, it means that everything that can be done for you is done for you, leaving only the simplest things for you to do.

In event handlers, there are some very common requirements, such as event.preventDefault() to prevent default events and event.stopPropagation() to prevent event bubbling, etc. Therefore, Vue takes care of these common requirements in the event processing process for us. When we need it, just tell Vue, and it will automatically help us prevent default events, prevent event bubbling, etc. Then the way we tell Vue is the modifiers that Vue provides us. The modifiers are represented by the instruction suffix starting with a dot.

The preventDefault method example to prevent the default page refresh event of the <a> tag is as follows:

Common practice

<a href="" v-on:click=" rel="external nofollow" pe($event)">Vue click link</a> //To access the original DOM event in Vue, you can use the special variable $event to pass it into the method. In the original HTML, it is event

// ... 
methods: {
    pe(e){
        e.preventDefault()
    }
}

Using Modifiers

<a v-on:click.prevent>Vue click link</a> //The prevent modifier is equivalent to the above e.preventDefault()

From the above example, we can see that modifiers are syntactic sugar, which helps us write common requirements in advance and just say it when we need it. When there is an event handler, just continue writing it afterwards, as follows:

<a href="" v-on:click.prevent=" rel="external nofollow" pp">Vue click link</a>

// ... 
methods: {
    pp(){
        console.log('Do not jump to page execution event')
    }
}

Modifiers are executed sequentially, such as the above v-on:click.prevent="pp", which means that when clicking, the modifier prevent is executed first to prevent the default event, and then the subsequent pp event processing function is executed.

The modifiers correspond almost one-to-one to the relevant processing functions of the event. Depending on the event, the modifiers corresponding to different events are divided into several categories as shown below:

The origin and meaning of modifiers are as described above. As for the specific ones, you can go to the official website to find what you need when you actually use them. There are two most commonly used ones that need to be remembered, namely @click.stop is to prevent event bubbling, @click.prevent is to prevent the default event, and @keypress.enter is the key press Enter event.

3. .sync modifier

The .sync modifier is relatively special because it is not an evolution of the original event processing related functions of the event, but a modifier defined by Vue itself. For example, in the above modifier classification, .sync is also classified as a modifier of a custom event. So what exactly is this custom event?

This event corresponds to the eventBus event. The eventBus event is a pattern in MVC. Simply put, it is a process of publishing and subscribing. That is, there are two parties. Party A is responsible for always listening to a certain event, and Party B is responsible for triggering this event when needed. Party A performs certain operations when it hears that the event is triggered. Party A is subscribing and Party B is publishing, and both parties are in a publish and subscribe model.

So when would this be needed in Vue?

That is, when a Vue component accepts external data props, Vue stipulates that the child component only has the right to use the data after accepting the external data through props, but does not have the right to modify the property. Because, if the child component modifies the data transmitted from the outside, then the child component and the parent file that uses it can be changed back and forth, and there is no obvious source of the change in the parent component and the child component. In the end, no one knows who changed the data, and the data becomes difficult to control. Therefore, Vue stipulates that components can only use the properties of props and cannot change them themselves. If they want to change, they must notify the real owner of the data to change, that is, the parent file that uses the component.

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

Not using .sync

Subcomponent triggers an event. The event name format must be update:myPropName and is triggered using the $emit function.

this.$emit('update:title', newTitle) //newTitle is the value you want to modify after the props data is modified

The parent component can listen to that event and update a local data property as needed.

<myconponent :title="Ptitle" @update:title="Ptitle = $event" ></myconponent>
//Listen to the event in the parent component. The value passed after the event is triggered is received as $event. $event === newTitle. Ptitle is the data of the parent component.

Or the defined accept function parameters

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

Using .sync

The above process is very common in actual needs, so Vue defines the parent component's listening as a value-passing modifier, .sync. The above code becomes:

Subcomponents (same)

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

Parent Component

<myconponent :title.sync="Ptitle"></myconponent> //Equivalent to passing values ​​and monitoring above

Isn’t it sweet?

4. Summary

Rules for using .sync

1. Components cannot modify props external data

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

3.$event can get the parameters of $emit

The above is a detailed explanation of Vue's sync modifier. For more information about Vue's sync modifier, please pay attention to other related articles on 123WORDPRESS.COM!