深入理解vmodel

原文链接：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"/>