正文

首先我們來(lái)看一段代碼：

<input value="value">

這里是一個(gè)原生的input輸入框，每一個(gè)原生的輸入框都會(huì)有一個(gè)value的屬性來(lái)用于存儲(chǔ)用于輸入的最新的數(shù)據(jù)。

如果我們想要獲取到這個(gè)值我們可以通過(guò)input.target.value或者通過(guò)$event.target.value來(lái)獲取這個(gè)存儲(chǔ)的值。

只要用戶(hù)輸入了數(shù)據(jù)，那么此時(shí)input標(biāo)簽就會(huì)將輸入的數(shù)據(jù)放到這個(gè)value中(新數(shù)據(jù)會(huì)覆蓋舊數(shù)據(jù)，所以我們獲取到的都是最新的)。

現(xiàn)在我們來(lái)看上面的標(biāo)簽，我們?yōu)?code>input標(biāo)簽添加了一個(gè)value屬性，并且賦值'value'。其實(shí)在標(biāo)簽上設(shè)置value屬性它的作用有兩個(gè)：

• 在第一次創(chuàng)建input標(biāo)簽的時(shí)候，將對(duì)應(yīng)的初始值展示到輸入框中 （在無(wú)該屬性使輸入框不展示任何數(shù)據(jù)）
• 使用value屬性的初始值來(lái)初始化input.target.value（無(wú)該屬性時(shí)input.target.value為空串）

上面的那段代碼的意思是通過(guò)添加value="value"屬性，初始化input.target.value的值并且將初始值展示到對(duì)應(yīng)的輸入框中

這里需要注明一點(diǎn)，在后續(xù)用戶(hù)輸入的操作中，輸入框中的數(shù)據(jù)只是方便讓用戶(hù)看到自己輸入了什么僅此而已。 有人可以會(huì)有疑問(wèn)，難道不是input.target.value里是什么所以輸入框內(nèi)就顯示什么嗎？其實(shí)不是的。

輸入框顯示什么和 input.target.value并沒(méi)有直接聯(lián)系，輸入框內(nèi)的顯示只是方便用戶(hù)自己看到自己輸入了什么。

小結(jié)：

input中的value有兩種：value="xxx" 和 input.target.value 我們需要知道兩個(gè)分別有什么作用。在整個(gè)輸入顯示流程中， 他們分別扮演什么角色。

現(xiàn)在我們來(lái)看在vue中的輸入框，首先我們來(lái)看一段代碼：

<input
   v-bind:value
   @input="value = $event.target.value"
/>
data(){
    return {
          value:'123'
    }
}

我們一般使用v-bind:value來(lái)給Input標(biāo)簽綁定一個(gè)vue中的的，這里我們綁定的是this.value。 在這里v-bind:value === :value="value"。 這樣實(shí)現(xiàn)的原理比較簡(jiǎn)單。

首先我們定義了this.value因?yàn)閷?code>this.value綁定到了:value上，所以初始時(shí)會(huì)在輸入框展示我們指定的 值，即'123'。當(dāng)我們輸入數(shù)據(jù)之后，此時(shí)$envet.target.value(這里的$event.target.value就是input.target.value)就會(huì)存儲(chǔ)我們最新的輸入的值，然后將最新的值賦值給this.value。

因?yàn)?code>this.value變化了，此時(shí)vue對(duì)頁(yè)面進(jìn)行更新，此時(shí)更新后的input的:value是最新值。

但是這里有一個(gè)問(wèn)題，那就是<input>并不會(huì)被銷(xiāo)毀重建，也就是說(shuō)this.value = $event.target.value只是改變了this.value 若別的地方引用了this.value，那么就會(huì)同步改變。那么this.value的更新對(duì):value="value"的影響是什么呢？其實(shí)沒(méi)有什么影響。

因?yàn)槲覀兦懊嬲f(shuō)了，:value的作用有兩個(gè)：一是初始化input.value的值，二是將初始值渲染到對(duì)應(yīng)的輸入框中。 在一開(kāi)始將this.value作為初始值給Input.value和展示在框里，他的任務(wù)已經(jīng)完成了，后續(xù)的更改對(duì):value沒(méi)有一點(diǎn)關(guān)系。

其實(shí):value="value"的唯一作用就是將this.value作為初始值綁定和展示到input上。

v-model

現(xiàn)在對(duì)于原始元素進(jìn)行算雙向數(shù)據(jù)綁定已經(jīng)完成。那么如何實(shí)現(xiàn)父組件和子組件之間的雙向數(shù)據(jù)綁定嗯？ 此時(shí)我們需要在子組件中使用v-model。 關(guān)于 v-model 的使用這里不再贅述。這里只討論如何在自定義組件實(shí)現(xiàn) v-model。根據(jù)vue 的官網(wǎng)的描述，我們大概知道，v-model 的本質(zhì)就是語(yǔ)法糖，即：

<input type="text" v-model="name">
相當(dāng)于：
<input type="text" :value="name" @input="name = $event.target.value">

vue監(jiān)聽(tīng)輸入框輸入行為然后改變對(duì)應(yīng)的值。 如果對(duì)子組件進(jìn)行雙向數(shù)據(jù)綁定該如何實(shí)現(xiàn)呢？這里的雙向數(shù)據(jù)綁定指的是父組件將值傳遞給子組件使用，并且子組件可以改變父組件的值 其實(shí)上述的雙向綁定可以通過(guò)v-bind:propName.sync = 'xxx'來(lái)實(shí)現(xiàn)。 除了以上的方式，并且Vue還給我們提供了另一種方式：

<!-- 父組件.vue -->
<child-component :propName="data" @change="change" />
export default {
    data(){
     data:'123'
  },
  methods:{
     change(value){
        this.data = value
     }
  }
}

//在組件中如何想要改變父組件的值，那么直接出發(fā)對(duì)應(yīng)的事件即可：
this.$emit('change', newValue )

在vue中，它將上述的方法進(jìn)行了簡(jiǎn)化，我們可以使用v-model來(lái)對(duì)子組件進(jìn)行雙向數(shù)據(jù)綁定。例如：

<child-component v-model="pageTitle" />
<!-- 是以下的簡(jiǎn)寫(xiě): -->
<child-component :value="pageTitle" @input="pageTitle = $event" /> 

在默認(rèn)情況下v-model的觸發(fā)事件名稱(chēng)為input。 子組件想要使用的話(huà)，需要定義一個(gè)名為value的prop才能使用。 而在子組件中更改該值，只需要定義一個(gè)函數(shù)，有必要的時(shí)候執(zhí)行 this.$emit('input', newValue) 即可。

這里的newValue就是$event。 這樣就可以改變對(duì)應(yīng)的值。 當(dāng)然除了默認(rèn)的value和input的命名，vue還給我們提過(guò)了更加靈活的方式。

<!-- 父組件 -->
<child-component v-model="pageTitle" />

//子組件
export default {
  model: {
    prop: 'title', //這里相當(dāng)于別名，這里可以起其他名稱(chēng)
    event: 'change' //這里相當(dāng)于事件的別名，這里可以起其他名稱(chēng)
  },
  props: {
    // 這將允許 `value` 屬性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作為 model 的 prop
    title: {
      type: String,
      default: 'Default title'
    }
  }
}

當(dāng)我們想在子組件中改變傳入的值，那么直接可以this.$emit('change', newValue)

所以，在這個(gè)例子中 v-model 是以下的簡(jiǎn)寫(xiě)：

<child-component :title="pageTitle" @change="pageTitle = $event" />

其實(shí)本質(zhì)上，項(xiàng)目中的twowayFactor這個(gè)混入配置類(lèi)，他本質(zhì)上就是做了上面的操作。

  @Prop()
  @Model('valueChanged')
      bindValue!: T;

這樣做的目的是將v-model傳入的prop改為bindValue。 然后將默認(rèn)事件的名稱(chēng)從input改為了valueChange。 接著設(shè)置get/set

        get currentValue() {
            return this.bindValue;
        }
        set currentValue(value) {
            this.$emit('valueChanged', value);
        }

這樣做的目的是數(shù)據(jù)本地化。 在組件內(nèi)部定義一個(gè)currentValue 然后為該值設(shè)置get，當(dāng)訪(fǎng)問(wèn)currentValue等價(jià)于訪(fǎng)問(wèn)v-model的prop。 然后設(shè)置set。當(dāng)改變currentValue的值時(shí)，此時(shí)就會(huì)觸發(fā)對(duì)應(yīng)的事件。 當(dāng)觸發(fā)之后父組件中的值就會(huì)變化。這就實(shí)現(xiàn)了雙向數(shù)據(jù)綁定。

我們可以看到，其實(shí)this.currentValue的作用就是v-model操作的語(yǔ)法糖。 它并沒(méi)有什么特別之處，只是將v-model傳入的數(shù)據(jù)的訪(fǎng)問(wèn)和更改簡(jiǎn)單化了，都集中與一個(gè)值this.currentValue。

以上就是vue原生input輸入框原理剖析的詳細(xì)內(nèi)容，更多關(guān)于vue原生input輸入框的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論