方法一： 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"/>
複製程式碼

...
ethods: {
    onchange (value) {
        this.msg = value
    }
  }
...
複製程式碼

詳細解釋：自定義事件