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

这篇博客介绍了在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传递给下面的组件

这样AutoCompleteInput就可以顺利拿到他想要的props了。我只讲了$attrs,$listeners和它是一样的原理。自行参悟吧。

还有一点是标题中提到了vue3.0

在3.0中,$attrs会默认指向未被继承的props,而inheritAttrs会被废除。这样的话,我们就不需要再把$attrs解构赋值了,只需要声明自己需要的props,然后v-bind="$attrs"就可以了。还是很nice的。

这只是我个人的理解,更详细深入的可以看大佬们的博客:

https://blog.usejournal.com/the-perfect-wrapper-components-in-vue-2-6-and-soon-vue-3-0-41520cd4c3f2

https://zendev.com/2018/05/31/transparent-wrapper-components-in-vue.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值