v-model在自定义组件中的使用

前段时间出来面试，有一个面试老师问我v-model是什么，我回答说其实是组件里props中的value的值和往父组件$emit事件input的语法糖实现。

<template>
  <input type='text' :value='inputValue' @input='changeValue($event)'>
</template>

<script>
  export default {
    data(){
      return {
        inputValue: 'aaa',
      }
    },
    methods: {
      changeValue(e){
        this.inputValue = e.target.value;
      }
    }
  }
</script>

一般能够说出这个说明整体对vue的使用已经达到了熟悉的级别，本以为回答完这些后关于v-model的问题算是完满结束了，没成想面试老师神秘的微微一笑，问出了下面的问题：

如果你的自定义组件里value属性被占用了的话，如何实现v-model的功能？

听到这个问题我立马黑人问号脸！

这种问题没法顾左右而言它，只能老老实实说木鸡啊。

现在面试虽然结束了，但问题并没有结束！如何在自定义组件中value被占用的情况下实现v-model的功能？这问题只要一有闲暇便会浮现出来，看来是必须解决了！

老规矩，翻vue官档，每次看文档的时候总会有一种以前看的假文档的错觉，在表单输入绑定这块，翻出了一些关于v-model的内容。

基础用法

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。

基础用法解析

在框架越来越盛行的时代，大部分人对原生html和js的理解越来越模糊，为了彻底理解上面基础用法说的是什么，我决定用html和js对这些value、checked、selected之类的东西再熟悉一遍。

1. <input>元素的value属性和input事件。

     <input value='测试' onInput='changeValue(event)'/>
   

     function changeValue(e){
       console.log(e.target.value);
     }
   

value对应的值为输入框的值，input事件为输入框的值改变时发生的事件（js直接修改value值不会触发）。

假装不知道vue中可以对input直接使用v-model，那么自己封装的组件如下：

<template>
  <input ref='input' @input='changeValue'/>
</template>

<script>
export default {
  name: 'model-input',
  mounted(){
    this.$refs.input.value = this.value;
  },
  props: {
    value: String,
  },
  methods: {
    changeValue(e){
      this.$emit('input',e.target.value);
    }
  },
  watch: {
    value(newVal){
      if(this.$refs.input.value !== newVal) this.$refs.input.value = newVal;
    }
  }
}
</script>

2. 单选和复选的checked属性和change事件。

  <input type='radio' name='fruits' id='apple' value='apple' onChange='chooseFruit(event)'>
  <label for='apple'>苹果</label>
  <input type='radio' name='fruits' id='banana' value='banana' onChange='chooseFruit(event)' checked>
  <label for='banana'>香蕉</label>

  function chooseFruit(e){
    console.log(e.target.checked);
  }

checked为选中项，change事件为选中项发生改变时的事件。

3. <select>元素的value属性和change事件。
   

<select id='carBrand' onChange='selectBrand(event)'>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

function selectBrand(e){
  console.log(e.target.value);
}

<select>的value值为选中的<option>的value值，change为选中项发生改变时的事件（老规矩，js直接改变的不会触发）。

自定义组件上使用v-model

<template>
  <div>
    <span>{{num}}</span>
    <button @click='addNum'>增加</button>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        num: null,
      }
    },
    props: {
      value: Number,
    },
    mounted(){
      this.num = this.value;
    },
    methods: {
      addNum(){
        this.$emit('input',++ this.num);
      }
    },
    watch: {
      value(newVal){
        if(this.num !== newVal) this.num = newVal;
      }
    }
  }
</script>

以上便是是自定义组件上使用v-model的一般方法。

到此处，似乎还是没有解决面试老师问的那个问题，别急，翻翻官档，发现可以设置model配置来自定义v-model相关的变量值和事件。上面自定义组件可调整如下依旧可以正常使用v-model。

<template>
  <div>
    <span>{{num}}</span>
    <button @click='addNum'>增加</button>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        num: null,
      }
    },
    props: {
      notValue: Number,
    },
    model: {
      prop: 'notValue',
      event: 'notInput',
    },
    mounted(){
      this.num = this.notValue;
    },
    methods: {
      addNum(){
        this.$emit('notInput',++ this.num);
      }
    },
    watch: {
      notValue(newVal){
        if(this.num !== newVal) this.num = newVal;
      }
    }
  }
</script>