v-model用法

用法：在表单控件或者组件上创建双向绑定。

1.在表单控件上

<input v-model="sth" />
//等同于
<input :value="sth" @input="sth = $event.target.value" />

Vue 是单项数据流，v-model 只是语法糖而已

这个语法糖必须是固定的，也就是说，满足语法糖规则：属性必须为value，方法名必须为：input。缺一不可。

表单控件	v-model绑定的属性	v-model绑定的事件
Input[type=’text’] textarea	Value	Input
Input[type=’radio’] Input[type=’checkbox’]	Value/checked	change
select	Option.value	change

2.在组件上

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

fphone与phone实现了双向数据绑定

//子组件customComponent
<template>
  <div>
    <input
      :value="phone"
      type="number"
      placeholder="手机号"
      @input="handlePhoneChange"
    />
  </div>
</template>
<script>
export default {
  name: "customComponent",
  model: {
    prop: "phone", // 默认 value
    event: "change" // 默认 input
  },
  props: {
    phone: Number
  },
  methods: {
    handlePhoneChange(e) {
      //+e.target.value 字符串转化为数字
      this.$emit("change", +e.target.value);
    }
  }
};
</script>

//父组件
<template>
  <div>
    <customComponent v-model="fphone"></customComponent>

    <!-- 等价于 -->
    <!-- <customComponent
      :phone="fphone"
      @change="
        val => {
          fphone = val;
        }
      "
    /> -->
    手机号 {{ fphone }}
  </div>
</template>
<script>
import customComponent from "./customComponent";
export default {
  components: {
    customComponent
  },
  data() {
    return {
      fphone: 233333335555
    };
  },
  methods: {}
};
</script>

参考：

https://blog.youkuaiyun.com/winfredzen/article/details/89397351

https://www.jianshu.com/p/f974f0685d93