自定义组件v-model绑定

自定义事件v-model绑定

 

首先先看看官方文档的写法：

我们知道v-model与v-bind的区别有两点：

1 v-model是双向绑定数据，也就是当父组件的传进去的数据发生改变时，子组件的数据也会发生改变，当子组件发生改变时，父组件也会发生改变

  v-bind是单向绑定，当父组件的数据发生改变时，子组件的数据也会改变，但是当子组件发生改变时，父组件的数据不会发生改变

2 v-model默认绑定value值

   v-bind的绑定值是可以自定义的

所以自定义组件通过v-model绑定的第一个问题就是value值，第二个问题是子组件里面的数据发生改变之后怎么通知父组件也作出相应的改变，以实现双向数据绑定

这两个问题官方文档已经作出了解答：

举个例子：

父组件引用了这样的一个子组件：

<json-editor  v-model=“parentValue” @change="onChange()"></json-editor>

1 我们先来看value的问题：

由于v-model是默认绑定value值，所以在子组件里面现在props里面定义一个value值

<template>

  <div class="json-editer">

    <el-input type="textarea" v-model="textarea"></el-input>

  </div>

</template>

export default {

  props: ['value'],

就像是普通的v-bind绑定那样，只是子组件定义的接受值命名为value

 

2 解决数据同步的问题：

  我们希望当<el-input>标签里面的textarea发生改变的时候父组件的parentValue也能同步改变，那还要手动触发一个input事件，提交到父组件：

  所以我们应该在watch里面添加textarea的查看，当数据发生改变时，手动提交一个input事件，将数据传到父组件，以此完成数据的双向绑定

watch: {

  textarea: function () {

    this.validateTextarea()

  }

  validateTextarea () {

  try {

    this.$emit('input', this.textarea)

    this.$emit('change', this.textarea)

  } catch (e) {

    this.$emit('error', true)  }

}

要注意的是：

1 提交input事件只是做到了数据双向绑定，并不会出发父组件里的@change，所以如果想要在数据改变后调用相应的回调函数，别忘记再提交一个change事件

2 this.$emit('change', this.textarea) 改变的事件应该在this.$emit('input', this.textarea)后面提交，否则在处理改变函数的时候读取到的值不是最新的！