vue2自定义组件实现双向数据绑定

表单元素使用自定义v-model

<!-- 父组件 -->
<template>
  <div>
    <child v-model="message"/>
    <p>{{ message }}</p>
  </div>
</template>
<script>
import child from './components/child.vue'
export default {
  components: { child},
  data() {
    return {
      message: 'hello'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <input :value="value" @input="updateValue"/>
</template>
<script>
export default {
  props: ['value'],
  methods: {
    updateValue (e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>

非表单元素使用自定义v-model

<!-- 父组件 -->
<template>
  <div>
    <child v-model="count"/>
    <p>{{ count }}</p>
  </div>
</template>
<script>
import child from './components/child.vue'
export default {
  components: { child},
  data() {
    return {
      count: 0
    }
  }
}
</script>

<!-- 子组件 -->
<!--
如果要修改默认的value和input事件名，需要修改model.prop和model.event
-->
<template>
  <div>
    <button @click="sub">-</button>
    <span>{{value}}</span>
    <button @click="add">+</button>
  </div>
</template>
<script>
export default {
  props: ['value'],
  model: {
    prop: 'value',
    event: 'update:value'
  },
  methods: {
    sub (e) {
      // this.$emit('input', this.value - 1)
      this.$emit('update:value', this.value - 1)
    },
    add (e) {
      // this.$emit('input', this.value + 1)
      this.$emit('update:value', this.value + 1)
    }
  }
}
</script>