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

最近做新项目，写基础组件用到了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