vue $attrs和$listenners

Vue2.x 中的a t t r s 和 attrs和attrs和listeners
或许很多Vue小白跟我一样, 在之前不太了解a t t r s 和 attrs和attrs和listenners这两个API是干嘛的, 甚至没有听过或者使用过。下面我来浅述一下我对这两个API的理解。

下文将基于下面这张图片来进行解释，现在我们有三个组件, 组件之间的结构关系如下图所示: A：爷爷组件、B：父亲组件、C：儿子组件

$attrs

为什么要用$attrs？

场景： 现在组件的结构如上图所示，我们要实现由A组件到C组件之间的数据通信，有几种实现方式？

像我一样的小白或许刚好学了Props，此时一股脑将所有的属性写在B组件的Props中，这个方案固然可行，但是如果C组件下面还有组件呢？C的子孙千千万，B的Props中的属性也将变成千千万。不得不说B作为父亲的压力是真的大，不仅仅要养活C，还要养活C将来可能存在的千万子孙。这种解决方案无疑给后续的代码维护造成了比较大的阻碍。
或许学完了Props的小伙伴们又说了，那我们是不是可以借助其它工具？例如VueX这样的工具来实现，没错！VueX当然也可以实现以上场景，但是如果C中会用到的属性值很少，那么此时使用VueX来介入这样的问题，是否有点 ‘大动干戈’ 了呢？

能够解决（父→子）通信这类问题的手段有很多，正所谓没有最好的解决方案, 只有更适合的解决方案。在本文中主要踢一下$attrs这个API的使用。

怎么使用$attrs?
在vue2.4中，为了更好的解决上面这类场景的问题，引入了$attrs这一API来帮助咱开发者来解决这个问题。话不多说上代码：

 

页面显示如下:

从上面程序运行的结果, 相信能够看到$attrs的威力了, 它能够让咱们在解决父子通信、爷孙通信这类问题场景的时候更加优雅。毕竟优雅永不过时嘛

$listeners
爷爷 → 孙子 讲完了， 接下来看看咱们如何优雅地解决 爷爷 ← 孙子 的问题。

为什么要用$listenners?
场景: 现在组件之间的结构如最上面的图所示，我们要实现由C组件到A组件之间的数据通信，有几种实现方式？

可以在C组件中使用$emit()方法, 抛出一个事件给B组件, B组件再调用$emit()方法抛给A组件, 像这样一层一层往上传递。在组件关系、组件功能都不复杂的情况下，使用这种方法可以快速完成子组件到父组件之间的通信。
通过VueX来实现父子组件通信
父组件通过ref来调用子组件的方法
 

 

能够解决（父←子）通信这类问题的手段有很多，正所谓没有最好的解决方案, 只有更适合的解决方案。接下来主要踢一下$listenners这个API的使用。

怎么使用$listenners?

话不多说, 上代码:

通过观察我们发现, 由C组件到A组件之间的通信仅用到了一次e m i t ( ) , 这一小小的举动让我们的组件通信变得更加优雅了 , 我们只需要在 B 组件使用 C 组件的地方加上一句 ‘ v − o n = " emit(), 这一小小的举动让我们的组件通信变得更加优雅了, 我们只需要在B组件使用C组件的地方加上一句`v-on="emit(),这一小小的举动让我们的组件通信变得更加优雅了,我们只需要在B组件使用C组件的地方加上一句‘v−on="listeners"`就可以让A组件监听到C组件抛出的事件。看完本文后是否对$attrs 和 $listenners 有了深刻的认识呢?