封装自定义组件时如何透传事件监听器？

UE丶怡辰提问于 2026-03-21 19:24:23 阅读 3

组件

我写了个 Vue 的自定义按钮组件，想让父组件能监听 click 事件，但直接在父组件上写 @click 好像没反应。

试过在子组件里用 $emit('click')，但文档说原生事件不能这么透传。那正确的做法到底是啥？是不是得用 v-bind="$attrs" 配合 inheritAttrs: false？

<template>
  <button @click="$emit('click')">点我</button>
</template>

<script>
export default {
  inheritAttrs: false
}
</script>

封装技巧自定义组件

我来解答赞 1 收藏

反馈

1 条解答

博主倩云 Lv1

你在子组件里直接用 $emit('click') 确实不行，因为这会被当作一个自定义事件，而不是原生的 click 事件。Vue 提供了几种方法来解决这个问题，最常用的是使用 v-bind="$attrs" 和 inheritAttrs: false 来透传属性和事件。

你的 inheritAttrs: false 设置是对的，这个配置会阻止 Vue 将父组件的非 prop 属性绑定到根元素上。接下来你需要做的是在模板中使用 v-bind="$attrs" 来将这些属性应用到 button 元素上。这样，父组件上的 click 事件监听器就能正常工作了。

修改后的子组件代码如下：
pre class="pure-highlightjs line-numbers">

template>

这样处理后，父组件可以通过 @click 监听到按钮的点击事件了。希望这个解决方法对你有帮助。

2026-03-21 20:00