前言

在日常開發(fā)的過程中,v-model指令是經(jīng)常用到的,一般來說 v-model 指令在表單及元素上創(chuàng)建雙向數(shù)據(jù)綁定,但 v-model 本質(zhì)是語法糖。但提到語法糖,這里就不得不提另一個(gè)與v-model有相似功能的雙向綁定語法糖了,這就是 .sync修飾符。在這里就兩者的使用進(jìn)行一下總結(jié):

一、v-model

1. 作用

相信使用過vue框架的朋友對這個(gè)指令不會(huì)感到陌生,v-model是用來進(jìn)行<input>、<textarea>及 <select> 元素上數(shù)據(jù)的雙向綁定的
例如:

<template>
 <div>
   <input v-model="value" type="text">   //這里的v-model里面的value可以直接獲取到用戶的輸入值
 </div>
</template>

<script>
import son from '@/yanshi/son.vue'
 data() {
   return {
     value: ''    //這里定義的value變量可以直接將上面獲取到的值進(jìn)行操作
   }
 }
}
</script>

當(dāng)我們在input輸入框里面輸入了某個(gè)在值的時(shí)候,下面就可以直接獲取到我們的輸入值,而不需要操作dom元素進(jìn)行獲取

2.v-model的本質(zhì)

v-model的本質(zhì)上來說,是一個(gè)語法糖

目前咱們習(xí)慣性的寫法是這樣的:

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

但是實(shí)質(zhì)上的完整寫法:

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

也可以將@input后面寫成一個(gè)函數(shù),然后在methods中進(jìn)行賦值操作。

要理解這行代碼，首先你要知道 input 元素本身有個(gè)input 事件，這是 HTML5 新增加的，類似 onchange ，每當(dāng)輸入框內(nèi)容發(fā)生變化，就會(huì)觸發(fā) input 事件，把最新的value值傳給傳遞給val ,完成雙向數(shù)據(jù)綁定的效果 。

我們仔細(xì)觀察語法糖和原始語法那兩行代碼，可以得出一個(gè)結(jié)論：

在給 <input />元素添加 v-model 屬性時(shí)，默認(rèn)會(huì)把 val作為元素的屬性，然后把input事件作為實(shí)時(shí)傳遞 value 的觸發(fā)事件

注意:  不是所有能進(jìn)行雙向綁定的元素都是input事件。

3. v-model的特殊用法

一般情況,咱們使用v-model主要是用于數(shù)據(jù)的雙向綁定,可以十分方便的獲取到用戶的輸入值。但在某些特殊情況下,我們也可以將v-model用于父子組件之間數(shù)據(jù)的雙向綁定。這里需要用到父子傳值的相關(guān)知識(shí):

<template>
  <div>
    <son  v-model="num"/> //使用子組件
  </div>
</template>

<script>
import son from '@/yanshi/son.vue'   //引入子組件
export default {
  components: {
    son    //注冊子組件
  },
  data() {
    return {
      num: 100
    }
  }
}
</script>

這里咱們先定義了一個(gè)father組件和一個(gè)son組件,并且將son組件引入到father組件中,并且給son組件綁定了v-model進(jìn)行了傳值。此時(shí),我們需要到son組件中接收這個(gè)值并且使用他:

<template>
  <div>
    我是son組件里面接收到的值: {{ value }}
  </div>
</template>

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

注意:  我們這里接收的值必須是value,寫成其他名字將無法使用

一般情況下的父向子傳值,子組件中是不能直接修改的,在這里我們在子組件中直接修改這個(gè)值會(huì)進(jìn)行報(bào)錯(cuò)

例如:

<template>
  <div>
    我是son組件里面接收到的值: {{ value }}
    <button @click="value+=1">點(diǎn)我value+1</button>  
  </div>
</template>

錯(cuò)誤信息

當(dāng)我們需要將修改這個(gè)值時(shí),就需要再將其傳入父組件進(jìn)行修改。

這就需要在父組件的子組件標(biāo)簽上定義一個(gè)自定義的事件,通過在子組件中使用$emit('自定義事件名',值)的方法將值傳入父組件

在這里我們不能使用自定義的事件,因?yàn)槲覀冇玫氖?code>v-model進(jìn)行的傳值,所以我們只能使用input事件進(jìn)行修改

父組件中定義一個(gè)@input方法,再設(shè)置一個(gè)形參val接收子組件的傳值,

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

子組件中使用$emit()方法.調(diào)用父組件中的事件,并且進(jìn)行傳值

<template>
  <div>
    我是son組件里面接收到的值: {{ value }}
    <button @click="$emit('input',value+1)">點(diǎn)我value+1</button>
  </div>
</template>

這樣的話,就可以完成父子組件之間的數(shù)據(jù)雙向綁定效果,并且不會(huì)出現(xiàn)報(bào)錯(cuò)

二、.sync修飾符

1. .sync修飾符作用

相比較與v-model來說,sync修飾符就簡單很多了:

.sync修飾符可以實(shí)現(xiàn)子組件與父組件的雙向綁定，并且可以實(shí)現(xiàn)子組件同步修改父組件的值。

2. .sync修飾符本質(zhì)

// 正常父傳子： 
<son :a="num" :b="num2"></son>

// 加上sync之后父傳子： 
<son :a.sync="num" .b.sync="num2"></son> 

// 它等價(jià)于
<son
  :a="num" @update:a="val=>num=val"
  :b="num2" @update:b="val=>num2=val"></son> 

// 相當(dāng)于多了一個(gè)事件監(jiān)聽，事件名是update:a，回調(diào)函數(shù)中，會(huì)把接收到的值賦值給屬性綁定的數(shù)據(jù)項(xiàng)中。

這里面的傳值與接收與正常的父向子傳值沒有區(qū)別,唯一的區(qū)別在于往回傳值的時(shí)候$emit所調(diào)用的事件名必須是update:屬性名 ,事件名寫錯(cuò)不會(huì)報(bào)錯(cuò),但是也不會(huì)有任何的改變,這點(diǎn)需要多注意。

總結(jié)

.sync與v-model區(qū)別是

相同點(diǎn)：都是語法糖，都可以實(shí)現(xiàn)父子組件中的數(shù)據(jù)的雙向通信。

區(qū)別點(diǎn)：格式不同： v-model=“num”, :num.sync=“num”

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

另外需要特別注意的是:  v-model只能用一次；.sync可以有多個(gè)。

到此這篇關(guān)于vue中v-model和.sync修飾符區(qū)別的文章就介紹到這了,更多相關(guān)v-model和.sync修飾符區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論