Emit

Billy Chu in Kaohsiung

2020-03-02

不同於 props，是從內部向外傳遞。

# `v-on`：

以錢包事件為範例，如一般要將畫面上金額增加，我們會設定一個按鈕觸發點擊事件，以增加 Vue 應用程式 data 資料的數值。

<div id="app">
  <p>錢包內金額{{count}}元</p>
  <button @click="increase(1)">存入 1 元</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    count: 100,
    add: 1, //	用於後續子元件使用
  },
  methods: {
    increase(newStore) {
      this.count = this.count + newStore;
    },
  },
});

# Emit：

那如果我們要創立一個子元件，同時要能影響到外部的資料內容呢？

首先設定好元件的基本架構：

<div id="app">
  <p>錢包內金額{{count}}元</p>
  <button @click="increase(1)">存入 1 元</button>
  <store-money @increment="increase"></store-money>
</div>

標籤內自定義一個 increment 事件，會觸發 increase 函式。

Vue.component('storeMoney', {
  template: `
    <div>
      <button @click="incrementCounter">增加{{add}}元</button>
      <input type="number" v-model="add">
    </div>
  `,
  data: function() {
    //	避免單向傳輸造成的錯誤
    return {
      add: 1,
    };
  },
  methods: {
    incrementCounter() {
      this.$emit('increment', Number(this.add));
    },
  },
});

模板內的 incrementCounter 函式，會執行以下兩件事：
- 觸發 increment 事件，進而執行 increase 函式。
- 傳入 add 的值。

# v-on：

# Emit：

# `v-on`：