前言

$emit 讓我們可以發送出自訂的事件，例如: 觸發特定的事件(關閉 popup) 或是 子元件向外傳遞資料。

呼叫每一個 $emit 可以傳入兩個參數:

• 事件名稱: 這個名稱用在父元件作為監聽用
• payload 物件: 想要傳遞的資料

使用 v-on 指令或是縮寫 @ 來監聽 DOM 被觸發的事件。例如: v-on:click="methodName" 或 @click="methodName"

發送事件

有以下三種方式:

inline events

ex:

<template>
  <my-input @custom-change="logChange"/> <!-- 監聽 custom-change 這個事件-->
</template>

<script>
import MyInput from './components/MyInput.vue'
export default {
  components: {
    MyInput
  },
  methods: {
    logChange (event) {
      console.log(event)
    }
  }
}
</script>

<template>
    <div>
        <p> Wrapper for a text input </p>
        <input 
            type="text"
            placeholder="Custom input!"
            @change='$emit("customChange", $event.target.value)' /* INLINE EMIT! */
        />
    </div>
</template>

Options API

使用 this.$emit !

ex:

<template>
    <div>
        <p> Wrapper for a text input </p>
        <input 
            type="text"
            placeholder="Custom input!"
            @change='customChange'
        />
    </div>
</template>

<script>
export default {
    methods: {
        customChange (event) {
            this.$emit("customChange", event.target.value)
        }
    }
}
</script>

Composition API

因為在元件建立前就會執行 setup，必須使用 setup 第二個參數來先取得 emit方法

兩種方式:

• setup 傳入 context 物件
• 解構 context 物件

<template>
    <div>
        <p> Wrapper for a text input </p>
        <input 
            type="text"
            placeholder="Custom input!"
            @change='customChange'
        />
    </div>
</template>

<script>
export default {
    setup (props, context) {
        const customChange = (event) => {
            context.emit("customChange", event.target.value)
        }
        return {
            customChange
        }
    }
}
</script>

<!-- OR -->

<script>
export default {
    setup (props, { emit }) {
        const customChange = (event) => {
            emit("customChange", event.target.value)
        }
        return {
            customChange
        }
    }
}
</script>

補充

命名

在 Vue3，事件名稱會自動轉換大小寫，如果在子元件中使用camelCase，父元件會監聽到kebab-case的事件
ex:

// 子元件 發出事件
this.$emit('myEvent')

<!-- 父元件 監聽事件-->
<my-component @my-event="doSomething"></my-component>

v-model 修飾符 Modifiers

在處理事件時，很常使用 event.preventDefault() 或 event.stopPropagation() ，雖然可以把這些 DOM 事件相關的部分寫入 methods中，但盡可能 methods 單純的包含資料邏輯就好，所以可以使用 Vue 提供給 v-on 的事件修飾符。以點.表示的後綴。

• .stop 阻擋事件冒泡
• .prevent 阻擋預設行為
• .capture 以捕獲形式觸發事件
• .self 只觸發元素自己的事件
• .once 指定事件只觸發一次

ex:

<form v-on:submit.prevent="onSubmit">...</form>

.prevent修飾符告訴v-on這個directive 在觸發事件時，要去呼叫 event.preventDefault()

<!-- click 事件只會被觸發一次 --> 
<a @click.once="doThis"></a>

參考

A Guide to Vue $emit – How to Emit Custom Events in Vue

下篇預告

• Vue CLI

每日一句:
克服恐懼，好像才能變的勇敢