元件的自訂事件

已完成

HTML 元素可根據使用者互動來引發事件。 元件可讓您藉由發出事件來達成相同的目的。 其後，父元件將可處理這些事件，且其方式與您新增程式碼以接聽按鈕的 Click 事件十分類似。

註冊事件

建立元件時，您可以在 script 的 emits 欄位中列出元件可能發出的任何事件，藉以註冊這些事件：

<!-- inside the component's vue file -->
<script>
export default {
    name: 'Demo',
    emits: ['userUpdated']
}
</script>

發出事件

您可以使用 $emit 函式來發出事件。 如果您想要發出 HTML 控制項已直接引發的事件，您可以用內嵌方式執行此作業。 請留意您藉由為按鈕註冊 click 事件處理常式來發出 userUpdated 事件的方式：

<!-- inside the component's vue file -->
<template>
    <button @click="$emit('userUpdated')">Save user</button>
</template>

注意

您將使用 @click 的捷徑，這是您在 Vue 中連接事件處理常式時慣用的方式。

有時，您在發出事件之前可能需要執行更多步驟。 如果您的元件需要先將值儲存至資料庫，然後再傳回任何更新的資訊，您可以新增方法。 在該方法內，您可以使用 this.$emit 來引發事件，就像之前一樣：

<!-- inside the component's vue file -->
<template>
    <button @click="saveUser">Save user</button>
</template>
<script>
export default {
    name: 'UserDialog',
    emits: ['userUpdated'],
    methods: {
        saveUser() {
            // perform other operations
            this.$emit('userUpdated'); // emits event
        }
    }
}
</script>

發出含有資料的事件

元件可能需要透過事件將資料傳回父代。 您可以藉由將其他參數傳至 $emit，來傳回任何資料。 如果您想要藉由傳回 true 來指出更新是否成功，您可以依照下列方式更新呼叫：

<button @click="$emit('userUpdated', true)">Save user</button>

或者，您可以使用方法：

methods: {
    saveUser() {
        // perform other operations
        this.$emit('userUpdated', true); // emits event
    }
}

聆聽活動

接聽元件所發出的事件，與接聽一般 HTML 控制項所引發的事件相仿。 您通常會在父元件中建立方法，然後使用與 @click 或其他事件相同的 @<event-name> 語法，將方法連線至事件。 如果事件傳回任何資料，將會以參數的形式傳至函式。

若要為您先前建立的事件新增事件處理常式 userUpdated，您可以使用下列程式碼。 請注意，Vue.js 會如何從 camelCase 名稱轉換成 kebab-case 名稱。

<template>
<user-dialog @user-updated="handleUserUpdated"></user-dialog>
</template>
<script>
import UserDialog from './UserDialog.vue';
export default {
    methods: {
        handleUserUpdated(success) {
            if (success) {
                alert('It worked!!');
            } else {
                alert('Something went wrong');
            }
        }
    },
    components: {
        UserDialog
    }
}