vue 2.6 以及vue 3.0的$attrs, $listeners, inheritAttrs

最新推荐文章于 2025-06-16 17:53:19 发布

炯炯灯

最新推荐文章于 2025-06-16 17:53:19 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_18223479/article/details/92059440

Vue 专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍了在Vue 2.6和Vue 3.0中如何使用$attrs和$listeners来处理组件属性和事件的传递。作者通过一个AutoCompleteInput组件的例子，解释了如何利用这两个特性，以及如何配合inheritAttrs属性，避免在包装组件中重复传递props。在Vue 3.0中，$attrs默认包含了未被继承的props，简化了使用方式。

最近做新项目，写基础组件用到了vue2.6的新特性$attrs, $listeners, inheritAttrs。其实也不算新了，只是自己以前没用过，突然觉得自己更新知识的速度还是有点慢的。看来没事还是得多逛逛国外前端大佬的博客。

这仨货的基础知识文档都有，这种东西还是在项目里说明比较易懂而且实用，所以我直接说下基础组件的编写过程好了，以AutoCompleteInput组件为例。

首先要清楚我们的AutoCompleteInput组件需要哪些props，AutoCompleteInput说白了就是input + ul封装好的一个可下拉搜索的输入框。长这样

所以需要的也就是value，options，placeholder这几个。项目里我直接用了第三方的AutoCompleteInput库。

想好之后由于我们的AutoCompleteInput组件，是个底层组件，调用过程中可能不是直接调用，他通常还有包装组件，

为了使我们的包装组件更透明，我们就需要使用$attrs, $listeners, inheritAttrs这仨货。文字说的不清晰，看代码，比如项目中我们的AutoCompleteInput组件就有个父组件叫LocationPickerField，用来选择location的一个下拉搜索框。

其中的form-field组件是用来添加label的，可以忽略。这个LocationPickerField就是实际调用的组件了，调用场景如下

grandfather.vue

这个组件就是调用我们组件的地方。主要负责赋值以及监听处理回调事件。

那么我们在grandfather.vue中向LocationPickerField传的值有value，options，placeholder，label。但是我们的AutoCompleteInput只需要前三个。以前的我可能就会选择在LocationPickerField接收四个，然后再把其中三个通过props传给AutoCompleteInput。这样做是可以的，但是很麻烦，如果包装组件不止一个，两个甚至三个，那你可能会传prop传到吐。

这仨货就是用来解决这个问题的。我们在包装组件中需要的只是label，其余三个prop都是AutoCompleteInput需要的。那么你可能会想，要是我在包装组件也就是LocationPickerField中只继承label，其余的能够自动传给下面的AutoCompleteInput就好啦。可是现实往往很残酷，vue默认会把没有继承的props设置在子组件的根元素上，也就是说，如果在包装组件中没有继承其他props，他们会被自动设置在包装组件上，不会继续传给下面的组件。inheritAttrs属性就是掌管这个flow的，他默认值是true，也就是默认继承props，但是我们可以通过设置inheritAttrs这个属性为false，来使没有继承的props继续传递下去。怎么传递？就是通过$attrs。$attrs默认包含所有从父组件传递下来的props，我们可以通过解构赋值，筛选出我们要的，return其余需要传递的props，再通过v-bind:attrs传递给下面的组件