iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 24
1
Modern Web

學習 vue 30天系列 第 24

Vue 24 Component - 元件組合與溝通 [2]

昨天是說 Props 由父元件往下傳遞資料給子元件,今天來講 Emit event 有子元件往上傳遞資料給父元件。

Emit 向外層傳遞事件

Emit 是一個事件,相對於 Props 來說它不是即時的把資料往外傳送,也就是說它每次往外層送必須去觸發一個事件,它才會把資料往外層送,那該怎麼做?那就是自定義事件!

子元件對父元件的 Events up

子元件要回應父元件的方式是 Event up,就是 Vue 的事件處理,使用 v-on 接收事件觸發並且去呼叫對應的函式,這邊的事件我們可以自訂義,現在來看看該怎麼做。

Vue Instance 事件介面(Event Interface)實作方式包含以下兩種:

  • 使用$ on(eventName)監聽事件
  • 使用$ emit(eventName)觸發事件

在模板裡是使用 v-on 綁定事件。

範例:

<div id="app">
    <h2>透過 emit 向外傳遞資訊</h2>
    我透過元件儲值了 {{ cash }} 元
    
    <!-- increment 是自定義事件名稱 -->
    <button-counter @increment="incrementTotal"></button-counter>
</div>
<script>
    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() {
                // 觸發外層 increment 的事件
                // emit 也可以傳遞參數
                // 確保它傳入的是數值用 Number
                this.$emit("increment", Number(this.counter));
            }
        }
    });

    var app = new Vue({
        el: '#app',
        data: {
            cash: 300
        },
        methods: {
            incrementTotal(newNum) {
                this.cash += newNum;
            }
        }
    });
</script>

元件綁定原生事件

有時候你會想要在元件上綁定原生事件,你可以加上 .native 修飾符號:

<dice-button @roll="showResult" @click.native="doWhat">

非父子元件溝通(global event bus)

前面都是父子溝通,那兩個子元件要如何溝通?因為每個元件都是獨立運作在自己的範圍,所以我們可以透過一個空的 vue instance 作為中央事件總線。

// 創建空的Vue Instance "bus"
var bus = new Vue()

// 觸發A元件中的事件 "id-selected"
bus.$emit('id-selected', 1)

// 在B元件的 "created" 鉤子中監聽 "id-selected" 這個事件
bus.$on('id-selected', function(id) {
    // content
})

此應用只適合小網站應用,如果有很多子元件都透過這樣的方式溝通,會讓這個bus管理線變得很繁忙複雜,所以中大型網站官方推薦使用Vuex,它是一個狀態管理模式。

參考資料

Day17 - [Components] 元件組合與溝通
Vue.js (9.2) - 元件(Component)
vue】組件的使用(3)自定義事件$ on / $ emit


上一篇
Vue 23 Component - 元件組合與溝通 [1]
下一篇
Vue 25 Slot 插槽
系列文
學習 vue 30天30

尚未有邦友留言

立即登入留言