props 是從 Vue 實體傳送資料進去元件內，若是元件想要改變 Vue 實體本身的資料，這時候就會需要 emit 了
props 是一個方法，但 emit 是一個事件，即是一個需要被觸發的事件，才會去更改外部的資料

首先建立一個元件跟一個點擊 button 就會觸發 addTotal 的事件:

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

<script type="text/x-template" id="button-counter">
  <div>
    <button class="btn btn-outline-primary">增加 {{ counter }} 元</button>
    <input type="number" class="form-control mt-2" v-model="counter">
  </div>
</script>

<script>
    Vue.component('buttonCounter', {
      template: '#button-counter',
      data: function() {
        return {
          counter: 10
        }
      }
    });
    
    var app = new Vue({
      el: '#app',
      data: {
        cash: 300
      },
      methods: {
        addTotal: function(){
          this.cash = this.cash ++ ;
        }
      }
    });
</script>

接著要點擊 button-counter 元件，來觸發 Vue 實體的 addTotal 的事件，並改變 cash 的值:

1. 首先 x-template 內會有自己的事件

<script type="text/x-template" id="button-counter">
  <div>
    <button @click="incrementCounter" class="btn btn-outline-primary">增加 {{ counter }} 元</button>
    <input type="number" class="form-control mt-2" v-model="counter">
  </div>
</script>

2. 接著在 Vue.component() 內新增 methods 把 x-template 的事件寫入進去，這就像是在 Vue 實體新增事件 function，只是現在是在元件內新增:

Vue.component('buttonCounter', {
      template: '#button-counter',
      data: function() {
        return {
          counter: 10
        }
      },
      methods: {
          incrementCounter: function(){
          
          }
      }
    });

3. 接著在元件綁定一個自定義的事件，並指向外部我們要觸發的事件 function:

<div id="app">
  <h2>透過 emit 向外傳遞資訊</h2>
  我透過元件儲值了 {{ cash }} 元
  <button class="btn btn-primary" @click="addTotal">按我</button>
  <hr>
  <!-- add 為自定義的名字 -->
  <button-counter @add="addTotal"></button-counter>
</div>

到這就類似兩邊的橋梁都建好了，接下來只需要連接起來就可以了，所以
4. 在 Vue.component() 內的事件 function 使用 emit 方法，而我們要連結的值，就是在元件內自定義的事件:

Vue.component('buttonCounter', {
      template: '#button-counter',
      data: function() {
        return {
          counter: 10
        }
      },
      methods: {
          incrementCounter: function(){
              this.$emit('add');
          }
      }
    });

這時候我們點擊 button-counter 就可以更改外部的 cash 的值了。