Vue2.4中$attrs，$listeners，inheritAttrs的使用和理解

先来看一张图如下

vue父子组件之间的传值我们都知道使用props和emit，但是祖孙之间的传值在以前，我们都需要子辈作为中间人，当祖辈有值要传递给孙辈时，需要子辈作为中间人把值传递给孙辈，当孙辈想要改变祖辈的值时，需要先emit子辈的方法，然后子辈再emit父辈的方法从而改变祖辈的值，如果是多级组件嵌套的话，那么祖孙辈之间传值，就会变得非常的繁琐，为了解决这个需求，vue2.4版本产生了$attrs，$listeners，inheritAttrs这三个属性。

inheritAttrs、attrs和attrs和listeners使用场景：

组件传值，尤其是祖孙组件有跨度的传值。

简单的来介绍这三个属性：

1、inheritAttrs

官方介绍：https://cn.vuejs.org/v2/api/#inheritAttrs

这里其实介绍的很隐晦，详细可移步https://www.jianshu.com/p/ce8ca875c337，其实就是如下图：

 渲染后下过如下：图片来自https://www.jianshu.com/p/ce8ca875c337

组件内未被注册的属性将作为普通html元素属性被渲染，如果想让属性能够向下传递，即使prop组件没有被使用，你也需要在组件上注册。这样做会使组件预期功能变得模糊不清，当我们把 inheritAttrs设置为false的时候就不会出现这种情况了。

2、$attrs

官方介绍：https://cn.vuejs.org/v2/api/#vm-attrs

通俗的理解为：子辈可以通过$attrs将未在自己组件内注册的祖辈传递下来的参数接收来，并传递孙辈

如下图：

 

3、 $listeners

官方介绍：https://cn.vuejs.org/v2/api/#vm-listeners

官方介绍的很简隐晦，很多人可能无法理解，其实就是我们在子辈上绑定 v-on=”$listeners”, 在祖辈组件中，监听孙辈组件触发的事件。就能把孙辈组件发出的数据，传递给祖辈组件。如下：

 

 

demo运行结果如下：

 

点击按钮后：

 

demo源码分享：

祖辈

 子辈

孙辈：

欢迎关注我的公众号：bb妞，我放置了很短前端相关书籍，分享给每一位在前端道路上拼搏的朋友！