Vue 3:将所有$attrs传递给child,但排除listener

icomxhvb  于 12个月前  发布在  Vue.js
关注(0)|答案(1)|浏览(137)

由于$attrs$listeners现在在Vue3中合并,如何将所有$attrs传递给除了侦听器之外的子对象?
在Vue2中:

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

字符串
但在Vue3中,这也会将侦听器泄漏到子对象中,从而产生副作用,例如多次触发事件。
我仍然需要传递属性,但不需要传递侦听器。我该怎么做?
到目前为止,我可以添加inheritAttrs: false,但随后我需要手动解析$attrs,并排除以“on +大写字母”开头的所有内容。
有更好的办法吗?

wxclj1h5

wxclj1h51#

现在它开始走到一起。
除了合并的列表器和$attrs,Vue 3还引入了一个新的emits属性,它正好解决了这个问题-声明组件中的事件,你不想落入根元素。
虽然文档中说有新的“emits”选项,但我一直不清楚为什么需要使用该选项。但在遇到这个问题后,现在一切都变得更有意义了。
我在文件中发现了一条隐藏的线,也证实了这一点:
请注意,emits选项会影响哪些事件侦听器被视为组件事件侦听器,而不是本机DOM事件侦听器。已声明事件的侦听器将从组件的$attrs对象中删除,因此它们不会被传递到组件的根元素。有关详细信息,请参阅Fallthrough Attributes。
虽然如果将事件传递给孙子级,这种方法假设所有组件链都应该知道并声明所有可能传播回来的事件。目前还没有看到一个通用的解决方案。

相关问题