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);

例：组件1

Vue.component('my-component', {
  template: `<div>
  <input type="text" :value="currentValue" @input="handleInput"/>
  </div>`,
  computed:{
    currentValue:function () {
      return this.value
    }
  },
  props: ['value'], //接收一个 value prop  
  methods: {
    handleInput(event) {
      var value = event.target.value;
      this.$emit('input', value); //触发 input 事件，并传入新值
    }
  }
}); 

下面是将prop属性绑定到data里，以便修改 prop 数据(Vue不允许直接修改prop属性的值) #查看原理#

例：组件2

Vue.component("my-counter", {
  template: `<div>
  <h1>{{value}}</h1>
  <button @click="plus">+</button>
  <button @click="minu">-</button>
  </div>`,
  props: {
    value: Number //接收一个 value prop
  },
  data: function() {
    return {
      val: this.value // data中的属性在声明时可以直接用props的值赋值，但不能用data中的值赋值（无效）。
    }
  },
  methods: {
    plus() {
      this.val = this.val + 1
      this.emit('input', this.val) //触发 input 事件，并传入新值
    },
    minu() {
      if(this.val>0){
        this.val = this.val-1
        this.emit('input', this.val) //触发 input 事件，并传入新值
      }
    }
  }
});

查看在线例子

 
来源：https://www.cnblogs.com/bldf/p/6645225.html

官方文档：https://cn.vuejs.org/v2/guide/components-custom-events.html#自定义组件的-v-model

 
 
【相关文章】
Vue之自定义组件的v-model原理详解