vue 自定义组件使用v-model

app.vue

<div id="app">
  <my-component v-model="msg"></my-component>
  msg: {{msg}}
  <my-counter v-model="num"></my-counter>
  num: {{num}}
</div>

my-component.vue

<template>
  <div>
    <input type="text" :value="currentValue" @input="handleInput"/>
  </div>
</template>
<script>
export default {
  data() {}
  computed:{
    currentValue () {
      return this.value
    }
  },
  props: ['value'], //接收一个 value prop
  methods: {
    handleInput(event) {
      var value = event.target.value;
      this.$emit('input', value); //触发 input 事件，并传入新值
    }
  }
});
</script>