In the process of daily development ,v-model Instructions It is often used , Generally speaking v-model Instruction in Forms And Elements To create a Two way data binding , but v-model The essence is Grammatical sugar . But when it comes to grammar sugar , Here we have to mention another and v-model Two way binding syntax sugar with similar functions , This is it. .sync Modifier . Here is a summary of the use of both :

One 、v-model

1. effect

Believed to have been used vue Friends of the framework will not be unfamiliar with this instruction ,v-model It's for carrying on <input>、<textarea> And  <select>  Two way binding of data on element
for example :

<template>
 <div>
   <input v-model="value" type="text">   // there v-model Inside value You can directly get the user's input value 
 </div>
</template>

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

When we're in input When a value is entered in the input box , Now we can get our input value directly , There is no need to operate dom Element

2.v-model The essence of

v-model In essence , It's a Grammatical sugar

At present, our customary way of writing is like this :

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

But essentially complete writing :

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

Can also be @input Then write a function , And then in methods Perform assignment operation in .

To understand this line of code , First of all, you need to know input The element itself has a input event , This is a HTML5 Newly increased , similar onchange , Whenever the content of the input box changes , It will trigger input event , Put the latest value Pass the value to val , Complete the effect of two-way data binding .

Let's take a closer look at the two lines of code between the syntax sugar and the original Syntax , We can come to a conclusion ：

In giving  <input /> Element to add v-model Attribute , By default the val As an attribute of an element , And then put input Events are delivered in real time value Trigger events for

Be careful :   Not all elements that can be bound in both directions are input event .

3. v-model Special use of

General situation , Let's use v-model It is mainly used for two-way binding of data , It is very convenient to get the user's input value . But in some special cases , We can also put v-model Used for bidirectional binding of data between parent and child components . Here we need to use the relevant knowledge of parent-child value transmission :

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

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

Here we first define a father Components and a son Components , And will son Components are introduced into father In the component , And give son Component is bound v-model Value transfer is carried out . here , We need to get to son The component receives this value and uses it :

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

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

Be careful :   The value we receive here must be value, Other names cannot be used

In general, the parent transfers values to the child , Sub components cannot be modified directly , Here, if we directly modify this value in the sub component, an error will be reported

for example :

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

error message

When we need to change this value , You need to pass it into the parent component for modification .

This requires defining a custom event on the child component label of the parent component , By using... In subcomponents $emit(' Custom event name ', value ) Pass the value into the parent component

We can't use custom events here , Because we use v-model Value transfer , So we can only use input The event was modified

Define a in the parent component @input Method , Set another formal parameter val Receive the value of the subcomponent ,

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

Use... In subcomponents $emit() Method . Call the event in the parent component , And pass the value

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

In this case , You can complete the effect of two-way data binding between parent and child components , And there will be no error report

Two 、.sync Modifier

1. .sync The modifier function

Compare with v-model Come on ,sync Modifiers are much simpler :

.sync Modifier can realize the two-way binding between child component and parent component , And the child component can synchronously modify the value of the parent component .

2. .sync Modifier essence

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

//  add sync Then the father passed on to the son ： 
<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> 

//  It's equivalent to one more event listening , The event name is update:a, In the callback function , The received value will be assigned to the data item bound by the property .
 Copy code 

There is no difference between sending and receiving values and normal parent-child values , The only difference is when the value is passed back $emit The called event name must be update: Property name  , If the event name is written incorrectly, no error will be reported , But there will be no change , This needs more attention .

summary

.sync And v-model The difference is that

The same thing ： It's all grammar sugar , Can realize the two-way communication of data in parent-child components .

Difference point ： The format is different ：v-model=“num”, :num.sync=“num”

v-model：@input + value
:num.sync: @update:num

Another thing that needs special attention is :  v-model It can only be used once ;.sync There can be multiple .