我們知道，父元件是使用 props 傳遞資料給子元件，但如果子元件要把資料傳遞回去，應該怎樣做？那就是自定義事件！

• 使用 $on(eventName) 監聽事件
• 使用 $emit(eventName)觸發事件

Vue.component('button-counter', {
  template: `
  <button v-on:click="increment">{{ counter }}</button>`,
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
});

new Vue({
  el: '#example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})
 

<div id="example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

通過以上程式碼發現，就是子元件自定義了個事件，然後把這個事件發射出去，父元件應用這個事件，就實現了

官網還提供了另一個有意思的例子

Vue.component('currency-input', {
  template: `
    <span>
      $
      <input
        ref="input"
        v-bind:value="value"
        v-on:input="updateValue($event.target.value)"
      >
    </span>
  `,
  props: ['value'],
  methods: {
    updateValue: function (value) {
      var formattedValue = value
        // 刪除兩側的空格符
        .trim()
        // 保留 2 小數位
        .slice(0, value.indexOf('.') + 3)
      // 如果值不統一，手動覆蓋以保持一致
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      this.$emit('input', Number(formattedValue))
    }
  }
})

new Vue({
  el: '#example',
  data: {
    price:''
  }
})
 

   <div id="example">
      <currency-input v-model="price"></currency-input> 
   </div>

注意這裡的v-moel是個語法糖

    <input v-model="something">

應為

    <input v-bind:value="something" v-on:input="something = $event.target.value">