The difference between the.sync modifier and the V-model modifier in component passes

A, v – model

1. The role

, , and elements. For example:

<template>
 <div>
   <input v-model="val" type="text">// The value in the v-model can be obtained directly from the user's input value</div>
</template>

<script>
import son from '@/yanshi/son.vue'
 data() {
   return {
     val: ' '    // The value variable defined here can operate directly on the value obtained above}}}</script>
Copy the code

When we enter a value in the input field, we can get our input value directly without manipulating the DOM element

2. V – the essence of the model

The V-Model is essentially a syntactic sugar

At present we are used to writing like this:

 <input v-model="val" type="text">
Copy the code

But essentially the whole thing

<input :value="val"  @input="val=$event.target.value" />
Copy the code

Can also be@inputI’m going to write it as a functionmethodsWe won’t talk too much about it here

To understand this line of code, the first thing you need to know is that the input element itself has an input event. This is a new addition to HTML5, like onchange, which triggers an input event whenever the content of the input field changes. Pass the latest value to val to complete two-way data binding.

If we look closely at the lines of syntax sugar and the original syntax, we can conclude:

When you add a V-model attribute to a element, you default to val as the attribute of the element, and then the input event as the trigger that passes the value in real time

Note: Not all elements that can be bidirectionally bound are input events, as noted on the vue website

3. Special usage of V-model

In general, we use V-Model mainly for two-way data binding, which can be very convenient to obtain user input values. However, in some special cases, we can also use the V-Model for bidirectional binding of data between parent and child components. Here we need to use the relevant knowledge of father-child transmission value. If you don’t know much about it, you can go to the vUE official website to learn. Without further ado, go to the code:

<template>
  <div>
    <son  v-model="num"/>// Use child components</div>
</template>

<script>
import son from '@/yanshi/son.vue'   // Introduce child components
export default {
  components: {
    son    // Register child components
  },
  data() {
    return {
      num: 100}}}</script>
Copy the code

Here, we first define a father component and a son component, and introduce the son component into the father component, and bind v-model to the son component for value transmission. At this point, we need to receive this value in the SON component and use it

<template>
  <div>I am the value received in the son component: {{value}}</div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number.required: true}}}</script>
Copy the code

Note: the value we receive here must be value. Writing it as another name will not work

This is the effect presented on the page, which can be displayed normally Under normal circumstances, the parent passes the value to the child, which cannot be directly modified in the child component. In this case, if we directly modify the value in the child component, an error will be reportedFor example,

<template>
  <div>I am the value received in the son component: {{value}}<button @click="value+=1">I value + 1 point</button>  
  </div>
</template>
Copy the code

The error message When we need to modify this value, we need to pass it to the parent component for modification.

This requires a custom event to be defined on the child tag of the parent component by using it in the child component$emit(' custom event name ', value)Method passes the value to the parent component

We can’t use custom events here because we are passing values using v-Model, so we can only modify them using input events

The parent component defines an @input method and sets a parameter val to receive a value from the child component.

<template>
  <div>
    {{ num }}
    <son v-model="num" @input="val=>num=val" />
  </div>
</template>
Copy the code

The $emit() method is used in the child component. Calls the event in the parent component and passes the value

<template>
  <div>I am the value received in the son component: {{value}}<button @click="$emit('input',value+1)">I value + 1 point</button>
  </div>
</template>
Copy the code

In this way, two-way data binding between parent and child components can be accomplished without error

Sync modifier

1.. sync modifier effect

The sync modifier is much simpler than the V-Model:

The.sync modifier enables bidirectional binding of a child component to its parent, and allows the child component to synchronize the value of the parent component.

2. Sync modifier nature

// Normal father to child:
<son :a="num" :b="num2"></son>

// Add sync from father to child:
<son :a.sync="num" .b.sync="num2"></son> 

// It is equivalent to
<son
  :a="num" @update:a="val=>num=val"
  :b="num2" @update:b="val=>num2=val"></son> 

Update :a callback assigns the received value to the data item in the property binding.
Copy the code

The only difference is that when $emit sends back the value, the event name must be update: property name. There is no error in writing the event name, but it does not change.

conclusion

From the above, we can summarize the similarities and differences between the.sync modifier and the V-Model

.sync is different from v-Model

Similarities: both are syntactic sugar, and both can realize two-way communication of data in parent and child components.

Differences: Different formats. Sync =”num” V-model: @input + value :num. Sync: @update:num

Special attention should be paid to: V-Model can only be used once; .sync can have more than one.