vue组件实现双向绑定

在封装vue组件过程中，有时候会碰到需要实现组件的某个属性需要和父组件的某个值双向绑定，碰到这种情况如何实现呢？

比如，我们要封装一个输入框组件，父组件的某个值要和子组件的输入框中的值双向绑定，直接上代码：

父组件：

<template>
  <div>
    <div>
      <kkm v-model="datas"></kkm>
    </div>
    <div>
      <label>{{ datas }}</label>
    </div>
  </div>
</template>

<script>
import Kkm from './Kkm.vue'

export default {
  components: {
    Kkm
  },
  data() {
    return {
      datas: ''
    }
  }
}
</script>

子组件：

<template>
  <div>
    <label>key：</label>
    <input v-model="tva" @input="changeData"/>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'tva',
    event: 'change-data'
  },
  props: {
    tva: String
  },
  methods: {
    changeData(event) {
      this.$emit('change-data', event.target.value)
    }
  }
}
</script>

我们来分析一下子组件的逻辑，其实这是一种语法糖的写法，子组件的输入框通过tva属性获取值；同时，通过input事件将输入框的最新值返回给父组件；这个属性和事件的关系再通过model属性关联到一起，我们就可以在子组中通过v-model直接实现双向绑定的功能了。