前面講到 props，它是由外而內傳遞資料的一種屬性
不同於 props，emit 是一種事件，而且特性是由內至外
有一種情境是，當我們在 Vue 的 methods 寫好了一個 function 而元件也想使用時，這時候我們難道還要在元件底下重新寫一次，而不能直接取用外面的 methods 的 function 嗎 ?
所以 emit 就是這樣的功用

首先我們先把基本的情境架構寫出來:

<div id="app">
  <h2>透過 emit 向外傳遞資訊</h2>
  我透過元件儲值了 {{ cash }} 元
  <button>按我</button>
  <button-counter"></button-counter>
  <hr>
  <button-counter></button-counter>
</div>

<script>
Vue.component('buttonCounter', {
  template: `<div>
    <button @click="incrementCounter" class="btn btn-outline-primary">增加 {{ counter }} 元</button>
    <input type="number" class="form-control mt-2" v-model="counter">
  </div>`,
  data: function() {
    return {
      counter: 1
    }
  }
});

var app = new Vue({
  el: '#app',
  data: {
    cash: 300
  }
});
</script>

第一件事情是點擊﹝按我﹞的按鈕會觸發一個事件，然後讓 data 內的 cash +1
這時候我們在 Vue 的應用程式底下新增一個 methods 屬性，並新增一個讓 cash +1 的 function

<script>
Vue.component()

var app = new Vue({
    el: '#app',
    data:{
        cash: 300
    },
    methods: {
        incrementTotal: function(){
            this.cash ++;
        }
    }
});
</script>

然後在﹝按我﹞的按鈕新增一個 click 事件，觸發 function

<div id="app">
  <h2>透過 emit 向外傳遞資訊</h2>
  我透過元件儲值了 {{ cash }} 元
  <button @click="incrementTotal">按我</button>
  <button-counter"></button-counter>
  <hr>
  <button-counter></button-counter>
</div>

這時候 button-counter 元件也想使用 incrementTotal 這個 function 的話，該如何使用 emit 來寫呢?
首先先在 button-counter 元件新增 v-on:自訂義的名字="incrementTotal"

<div id="app">
  <h2>透過 emit 向外傳遞資訊</h2>
  我透過元件儲值了 {{ cash }} 元
  <button @click="incrementTotal">按我</button>
  <button-counter" v-on:increment="incrementTotal"></button-counter>
  <hr>
  <button-counter></button-counter>
</div>

再來，在 button-counter 元件的程式碼內新增一個 methods 屬性，並再自訂義一個 function 使用 emit:

<script>
Vue.component('buttonCounter', {
  template: `<div>
    <button @click="incrementCounter" class="btn btn-outline-primary">增加 {{ counter }} 元</button>
    <input type="number" class="form-control mt-2" v-model="counter">
  </div>`,
  data: function() {
    return {
      counter: 1
    }
  },
  methods: {
      incrementCounter: function(){
          this.$emit('increment');
      }
  }
});

var app = new Vue({
  el: '#app',
  data: {
    cash: 300
  },
  methods: {
      incrementTotal: function(){
          this.cash ++;
      }
  }
});
</script>

到這裡就會發現，我們點擊 button-counter 元件產生的 button 時，也能讓 cash +1 了

• emit 事件的命名需為小寫