Vue3：将所有 $attr 传递给子级但排除侦听器

Question

由于

$attrs

和

$listeners

现在已合并到 Vue3 中，如何将所有

$attrs

传递给除侦听器之外的子级？

在 Vue2 中：

<child v-bind="$attrs"/>

但在 Vue3 中，这也会将侦听器泄漏到子级中，从而产生多次触发事件等副作用。

我仍然需要传递属性，但不需要传递侦听器。我该怎么做？

到目前为止，我可以添加

inheritAttrs: false

，但随后我需要手动解析

$attrs

并排除以“on + 大写字母”开头的所有内容。

还有更好的办法吗？

Answer 1

现在它开始聚集在一起。

除了合并的列表器和

$attrs

之外，Vue 3 还引入了一个新的

emits

属性，它恰好解决了这个问题 - 声明组件中您不想传递到根元素的事件。

虽然文档指出有新的“emits”选项，但我一直不清楚为什么需要使用该选项。但在遇到这个问题之后，现在一切都变得更有意义了。

我在文档中发现了一条隐藏的行，这也证实了这一点：

请注意，emits 选项会影响哪些事件侦听器 考虑组件事件监听器，而不是原生 DOM 事件 听众。已声明事件的侦听器将从 组件的 $attrs 对象，因此它们不会传递给 组件的根元素。有关更多详细信息，请参阅 Fallthrough 属性。

尽管如果将事件传递给孙子，这种方法假设所有组件链都应该知道并声明可能传播回来的所有事件。目前的实现还看不到通用的解决方案。