深入理解v-model

原文鏈接：http://www.geeee.top/2019/04/03/vue-v-model/ 轉載請注明出處

v-model

v-model 是vue的一個語法糖，用於在表單控件或者在組件上創建雙向綁定。雙向綁定即修改model后界面view會自動更新，如果用戶更新了view，model的數據也會自動更新。

表單控件上使用v-model

<template>
    <div>
        <input type="text" placeholder="請輸入姓名" v-model="name"/>
    </div>
</template>

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

自定義組件的v-model

自定義組件中定義的props，是單向的，只能是父級向子組件傳遞，父級prop的更新會向下流動到子組件中，但是子組件不能修改父級的prop數據。 但有時候又有一些場景，需要子組件能夠修改父組件傳遞過來的數據，此時就可以通過v-model實現。

用法：
設置組件的model選項，該選項值是個object有兩個鍵prop和event，通過prop指定進行雙向綁定的屬性，event指定該組件中什么事件觸發后，更新prop

舉例：定義一個組件，該組件有兩個屬性photoInfo和，zipCode, 其中photoInfo是Object類型可雙向綁定。

// 組件定義personalInfo.vue
<template>
  <div>
    <select :value="city" @change = "handleAreaCodeChange" placeholder="區號">
        <option>北京</option>
        <option>上海</option>
    </select>
    <input
      :value="phoneInfo.phone"
      type="number"
      placeholder="手機號"
      @input="handlePhoneChange"
    />
    <input
      :value="zipCode"
      type="number"
      placeholder="郵編"
      @input="handleZipCodeChange"
    />
  </div>
</template>
<script>
export default {
    model {
        prop: 'name',
        event: ''
    },
    props: {
        phoneInfo: Object,
        zipCode: String,
    },
    methods: {
        handleAreaCodeChange(e) {
            this.$emit('change', {
                ...this.phoneInfo,
                areaCode: e.target.value   
            });
        },
        handlePhoneChange(e) {
          this.$emit("change", {
            ...this.phoneInfo,
            phone: e.target.value
          });
        },
        handleZipCodeChange(e) {
          this.$emit("update:personInfo.zipCode", e.target.value);
        },
    }
}
</script>

在index.vue中使用該組件

// 組件調用

<template>
    <personal-info v-model="personInfo" :zipCode="zipCode" 
        @update:zipCode="val => (zipCode = val)"></personal-info>
</template>

<script>
import personalInfo from './personalInfo.vue'
export default {
    components: {
        personalInfo
    },
    data() {
        personInfo: {areaCode: "+86", phone: ""},
        zipCode: "",
    }
}
</script>

注意：

如果沒有設置model選項，組件上的 v-model 默認會利用名為 value 的 prop 和名為 input 的事件。

v-model的本質

其實就是vue提供的一個語法糖，它等價於 v-bind: + v-on:

<input v-model="something"/>

等價於

<input v-bind:value="something" v-on:input="something = $event.target.value"/>