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

1. v-model简介

　可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定，它的本质是一个语法糖，在单向数据绑定的基础上，增加了监听用户输入事件并更新数据的功能。

2. v-model的实现原理

　动态绑定了 input 的 value 指向了 messgae 变量，并且在触发 input 事件的时候去动态把 message 设置为目标值，这样就完成了双向数据绑定。

<input 
    v-bind:value="message"
    v-on:input="message=$event.target.value">

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

　定义了一个 value 的 prop，并且在 input 事件的回调函数中，通过 this.$emit('input', value) 派发了一个事件，从而使 v-model 生效。

Vue.component('example', {
  template: `<div>
 　　 <input type="text" :value="val" @input="handleVal"/>
  </div>`,
  data: function () {
    return {
      val: this.value //将prop属性绑定到data属性上，以便修改prop属性（Vue不允许直接修改prop属性的值）
    }
  },
  props: ['value'], //接收一个 value prop
  methods: {
    handleVal($event) {
      var value = $event.target.value;
      this.$emit('input', value); //触发 input 事件，并传入新值
    }
  }
});

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

相关推荐