vue 自定义组件使用v-model

html

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

js

    Vue.component('my-component', {
      template: `<div>
      <input type="text" :value="currentValue" @input="handleInput"/>
      </div>`,
      computed:{
      	currentValue:function () {
        	return this.value
    		}
      },
      props: ['value'], //接收一个 value prop
      methods: {
        handleInput(event) {
          var value = event.target.value;
          this.$emit('input', value); //触发 input 事件，并传入新值
        }
      }
    });
    new Vue({
    	el: '#app',
      data: {
      	msg: 'hello world',
        num: 0
      }
    })