Vue中created钩子监听自定义事件与@绑定的对比及实现

一、在created钩子中监听自定义事件的原因 #

相较于在子组件标签上用@直接绑定事件，在created钩子中通过代码监听有以下场景优势：

• 动态控制监听状态：可以根据业务条件决定是否开启监听，后续也能通过$off手动移除事件绑定，模板绑定是静态的，无法灵活切换监听状态。
• 集中管理事件逻辑：当组件需要处理多个自定义事件，或者事件逻辑和其他初始化逻辑关联时，在钩子中统一处理能让代码结构更清晰，避免模板中事件绑定过多导致杂乱。
• 适配异步渲染场景：如果子组件是通过v-if、异步组件等方式延迟渲染的，模板绑定的事件可能会因为组件实例未创建而延迟生效，通过钩子函数可以结合$nextTick或组件生命周期状态确保监听及时绑定。
• 复用事件处理逻辑：如果同一个处理函数需要绑定到多个子组件实例，或者需要在不同时机动态绑定，代码方式比在每个子标签上重复写@绑定更高效。

二、在created钩子中监听event-name的实现方式 #

要在父组件的created钩子中监听子组件的event-name事件，需要先通过ref获取子组件实例，再调用$on方法绑定监听。注意：created阶段子组件尚未挂载，直接获取$refs可能失败，通常结合$nextTick或移到mounted钩子中执行更稳妥。

修改后的父组件代码 #

<template>
    <div>
        <p>{{ message }}</p>
        <!-- 给子组件添加ref标识，用于获取实例 -->
        <ChildComponent ref="childComp" />
    </div>
</template>
<script>
import ChildComponent from './ChildComponent'
export default {
    components: { ChildComponent },
    data () {
        return {
            message: 'Hello'
        }
    },
    created() {
        // 用$nextTick确保子组件实例已创建
        this.$nextTick(() => {
            // 绑定自定义事件，可复用已有的setMessage方法
            this.$refs.childComp.$on('event-name', this.setMessage)
        })
    },
    methods: {
        setMessage(payload) {
            this.message = payload.message
        }
    },
    beforeDestroy() {
        // 组件销毁前移除监听，避免内存泄漏
        this.$refs.childComp.$off('event-name', this.setMessage)
    }
}
</script>

更稳妥的mounted钩子实现 #

如果不需要在created阶段立即绑定，直接在mounted钩子中执行更简单：

mounted() {
    this.$refs.childComp.$on('event-name', this.setMessage)
}

内容的提问来源于stack exchange，提问作者naya khattar