理解v-model

理解v-model

参考文档：

• 65.从 Vue.js 自定义输入框深入理解 v-model
• vue中v-model等父子组件通信

v-model一般用于双向绑定：

以下内容来自：vue 自定义组件使用v-model

<input v-model="something">

v-model指令其实是下面的语法糖包装而成：

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

在一个组件上使用 v-model 时，会简化为：

<custom-input
  :value="something"
  @input="value => { something = value }">
</custom-input>

因此，对于一个带有 v-model 的组件，它应该如下：

• 接收一个 value prop
• 触发 input 事件，并传入新值

利用 $emit 触发 input 事件：

this.$emit('input', value);

---

官方文档中有讲到自定义组件的 v-model

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

如下的例子：
PersonalInfo.vue

<template>
  <div>
    <select
      :value="phoneInfo.areaCode"
      placeholder="区号"
      @change="handleAreaCodeChange"
    >
      <option value="+86">+86</option>
      <option value="+60">+60</option>
    </select>
    <input
      :value="phoneInfo.phone"
      type="number"
      placeholder="手机号"
      @input="handlePhoneChange"
    />
    <input
      :value="zipCode"
      type="number"
      placeholder="邮编"
      @input="handleZipCodeChange"
    />
  </div>
</template>
<script>
export default {
  name: "PersonalInfo",
  model: {
    prop: "phoneInfo", // 默认 value
    event: "change" // 默认 input
  },
  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:zipCode", e.target.value);
    }
  }
};
</script>

<template>
  <div>
    <PersonalInfo v-model="phoneInfo" :zip-code.sync="zipCode" />

    <PersonalInfo
      :phone-info="phoneInfo"
      :zip-code="zipCode"
      @change="val => (phoneInfo = val)"
      @update:zipCode="val => (zipCode = val)"
    />

    phoneInfo： {{ phoneInfo }}
    <br />
    zipCode： {{ zipCode }}
  </div>
</template>
<script>
import PersonalInfo from "./PersonalInfo";
export default {
  components: {
    PersonalInfo
  },
  data() {
    return {
      phoneInfo: {
        areaCode: "+86",
        phone: "111"
      },
      zipCode: "222"
    };
  }
};
</script>

...this表示的是对象的扩展