当前位置：网站首页>A few minutes before work, I found out V-model and The difference between sync

A few minutes before work, I found out V-model and The difference between sync

2022-07-01 22:52:00 【Front end non release Leo】

Catalog

Preface

One 、v-model And .sync The difference between

1、 The same thing

2、 Difference point

Preface

In the normal development process ,v-model The frequency of use is very high . Generally speaking ,v-model It can be used to create on forms and elements Two way data binding , Its essence is Grammatical sugar . But when it comes to grammar sugar , Here we have to mention another and v-model Bidirectional data binding syntax sugar with similar functions , That's it .sync Modifier .

Text

One 、v-model

1、 effect

Have used vue frame My friends should not feel strange to this instruction ,v-model It can be used for <input>、<textarea> And <select> And the data on other elements are bound Bi directionally .

A simple example ：

<template>
 <div>
   <input v-model="value" type="text" />
   <span> User input ：{
   {value}}</span>
 </div>
</template>

<script>
export default {
 data() {
   return {
     value: ''
   }
 }
}
</script>

When we enter a value in the input box , Our input values can be obtained directly from the following display , There is no need to operate dom Element .

2、 The essence

v-model It's essentially a Grammatical sugar .

Customary writing ：

<input v-model="val" type="text" />

Complete writing ：

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

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 , Be similar to change event , Whenever the content of the input box changes , It will trigger input event , Put the latest value The value passed to the val , Achieve 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、 Special Usage

General situation , We use v-model It is mainly used for two-way binding of data , It is 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"></son>
  </div>
</template>

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

First defined a father Components and a son Components , And will son Components are introduced into father In the component . to son Component is bound v-model Carry out value transmission . here , We need to get to son The component receives this value and uses （ adopt props）：

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

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    }
  }
}
</script>

Be careful : son The value received by the component must be value, Other names cannot be used ！！！

In general, the parent transfers values to the child , Sub components cannot be modified directly , As follows, we modify this value directly in the sub component , Will report a mistake ：

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

When we need to modify this value , You need to modify the value passed in from the parent component （ One way data flow ）.

This requires defining a custom event on the child component tag in the parent component , By using... In subcomponents $emit Pass the value into the parent component , Get and update in the parent component , Then pass in the sub components .

But in this case, we cannot use custom events , Because we use v-model Carry out value transmission , So we can only use input The event was modified .

Define a @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>

Use... In subcomponents $emit Method , Call... In the parent component input event , 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>

So the whole data flow of this example is ：

Parent component （ Initial value ）-> Child components （ Initial value ）-> Sub components pass values （ adopt $emit("input",newVal)）-> The parent component gets and updates the value （ adopt @input）-> Child components （ Update value ）

Two 、.sync

1、 effect

Compared with v-model Come on ,.sync It's 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 .

<son
  :a="num" @update:a="val => num = val"
  :b="num2" @update:b="val => num2 = val">
</son>

2、 The essence

Normal father to son ：

<son :a="num" :b="num2"></son>

Use .sync Later, the father passed on 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 .

Be careful ： There is no difference between sending and receiving values here 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 .