组件的自定义事件

4 分钟

HTML 元素可基于用户交互引发事件。使用组件发射事件也能引发事件。然后，父组件可以使用与添加代码以侦听按钮点击事件相同的方式来处理这些事件。

注册事件

创建组件时，在 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 会将采用骆驼拼写法的名称转换为用短横线分隔的小写名称。

<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
    }
}

继续

组件的自定义事件

注册事件

发射事件

发射带有数据的事件

侦听事件

反馈