第12屆鐵人賽Day 10 Vue元件裡由內而外的事件單向傳遞: $emit

元件內的資料傳遞可以說是Vue的大重點之一。 前兩天介紹了由外層父元件傳給子元件， 而今天要來說說如何把子元件由內到外進行「事件的單向傳遞」傳給父元件的Vue instance。

來！先跟我一起記一下口訣～

• 由外而內props
• 由內而外emit

以下是今天在Rails app練習時做出的頁面： 當我按下子元件的按我，送出Emit按鈕的時候，會將this.$emit('news');送出去。

Step1. 子元件的methods: $emit('自訂事件名稱')

在UI使用Vue元件時，透過@click='自訂事件名稱'的事件綁定， 按鈕被按下後，會emit傳遞自訂的news事件給父層元件。

News.vue

<template>
  <div class="news">
    <h1>本日重點：</h1>
    <button class="news-btn" @click="clickNews">按我，送出Emit</button>
  </div>
</template>

<script>
  export default {   
    data: function () {
      return {
        message: "由內層到外層元件的單向資料流：在子元件利用$emit('自訂事件名稱')送出事件給父元件"
      }
    },
    methods: {
      clickNews(){
        this.$emit('news');
      }
    }
  }
</script>

Step2. 在Vue Root掛載點，接收傳出來的事件

我在News元件上使用<News v-on:news="rootMethod"></News> 語法，讓父層接收了子元件傳出的事件方法news

home.html.erb

<div id="content">
  <div class="main-title">Vue.js x Rails第12屆鐵人賽專案：</div>
  <div class="main-body">本日主題：</div>

  <News v-on:news="rootMethod"></News>    
  <Foot></Foot>
</div>

Step3. 父元件接收事件後，執行rootMethod()方法

在本日的鐵人賽是透過console.log印出子元件送出事件，傳給父元件這段話作為例子～ home.js

import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
import News from "../components/news"
import Foot from "../components/foot"


Vue.use(TurbolinksAdapter)

document.addEventListener('turbolinks:load', () => {
  let el = document.querySelector("#content");

  if (el){
    new Vue({
      el,
      data: {
        day: "第 10 天",
        topic: "元件的溝通 - emit",
      },
      methods: {
        rootMethod(){
          console.log("子元件送出事件，傳給父元件")
        }
      },
      components: { News, Foot }
    })    
  }
})

emit完成圖

明天來用$emit的特性，做個簡單的to-do list吧！：）

Ref:

• Vue英文官網手冊: Emitting a Value With an Event
• Vue 小學堂 資料傳遞Part1.父子組件的資料傳遞Props與Emit