Ting's Square 程式寫作之路

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

Tags:  #rail    #vue  
Total : 203 words.

元件內的資料傳遞可以說是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: