[Vue] Vue 元件 - emit 篇

如何從元件傳遞資料到根實例？本篇筆記告訴你～

$emit 向外層傳遞事件

$emit 除了可以傳遞事件外，也可以傳遞參數。

$emit() 基本用法：

在元件標籤上設定 v-on:自訂事件名 = "Vue 根實例的 method"，這表示元件內的事件發生後將會觸發 Vue 根實例的方法，內層元件就是透過這種方式傳送到外層。

// HTML
<button-counter v-on:increment="incrementTotal"></button-counter>

元件的 template 中，要在 HTML 元素上綁定一個事件，以下面這個範例為例：發生 click 事件後要觸發 incrementCounter 函式，而這個函式是元件中的一個 method。在這個 method 裡面要用 $emit 觸發與 Vue 根實例綁定的事件，所以 $emit() 小括號內要寫入的是在元件標籤上設定的自訂事件名。

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

Vue 根實例中的 incrementTotal 方法，就是剛剛在元件上與自訂事件綁定的函式。

// Vue 根實例
var app = new Vue({
  el: '#app',
  data: {
    cash: 300
  },
  methods: {
    incrementTotal: function() {
      // 每按一下按鈕，cash 數字就加 1
      this.cash++;
    }
  }
});

使用 $emit() 與其參數：

// 元件
Vue.component('buttonCouter', {
  // ...
  methods: {
    incrementCounter: function () {
      this.$emit('increment', Number(this.counter));
    }
  }
});

// Vue 根實例
var app = new Vue({
  // ...
  methods: {
    incrementTotal: function(newCount) {
      // 用 newCount 參數接收元件傳來的 this.counter 值
      this.cash = this.cash + newCount;
    }
  }
});

結語

1. $emit() 第一個參數是自訂事件名稱，當元件發生一個事件時，把這個事件傳到根實例的 methods 去進行運算。
2. $emit() 第二個參數是元件的資料屬性，把專屬於這個元件的資料傳到根實例的 methods 去進行運算。
3. 元件模板中所綁定的，都是該元件獨有的資料、methods。
4. HTML 中的元件標籤則是元件資料與根實例資料互相綁定的場所。