方法一： input

示例：输入框

组件

通过this.$emit('input', value)将将用户的之输出到v-model绑定的值

<input v-bind:id="randomId"  v-bind:value="value" v-on:input="onInput"/>

export default {
  props: {
    value: String
  },
  data: function () {
    return {
      randomId: 'input-' + Math.random()
    }
  },
  methods: {
    onInput: function (event) {
      this.$emit('input', event.target.value)
    }
  }
}

使用

<my-input v-model="msg"/>

方法二： 自定义事件

原理和一是一样的，但是它给人的感觉是数据是双向的。

组件

用户输入时（input）,自定义一个onchange事件，将用户输入的值作为参数传递出去

<input v-bind:id="randomId"  v-bind:value="value" v-on:input="onInput"/>

export default {
  props: {
    msg : String
  },
  data: function () {
    return {
      randomId: 'input-' + Math.random()
    }
  },
  methods: {
    onInput: function (event) {
      this.$emit('onchange', event.target.value)
    }
  }
}

使用

实现自定义事件，获取子组件传递过来的值

<my-input :msg="msg" @onchange="onchange"/>

...
methods: {
    onchange (value) {
        this.msg = value
    }
  }
...

详细解释：自定义事件