自定义组件实现双向绑定

在很多情况下我们都会使用到自定义组件的双向绑定，今天我这里使用vue的model属性来实现双向绑定，其实原理还是一样的，只是我觉得这样做会不那么繁琐。

父组件

<template>
  <child v-model="message" />
</template>

export default {
  data() {
    return {
      message: '我是父组件'
    }
  }
}

子组件

<template>
  <!-- 这里改变值会响应到父组件的 message -->
  <imput v-model="message" />
</template>

export default {
  model: {
    props: 'message',
    event: 'change' // input | input-value | change | etc.
  },
  props: {
    message: String
  },
  data() {
    return {
      msg: '我是父组件'
    }
  },
  created() {
    this.msg = this.message // 初始赋值
  },
  methods: {
    clearMessage() {
      this.msg = '' // 这里改变值会响应到父组件的 message
    }
  },
  watch: {
    msg(val) {
      this.$emit('change', val) // 这里监听的事件行为与上面自己定义的一样就行
    }
  }
}

然后你也可以正常的往上抛事件