vue如何使用$attrs和$listeners进行多层级的数据和事件传递

这篇文章主要介绍了vue如何使用$attrs和$listeners进行多层级的数据和事件传递，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

使用 $attrs 和 $listeners 进行多层级的数据和事件传递

先聊聊如何传递 Prop，可以分为静态和动态的 Prop：

了解了 Props 的传递方式，在看看官方文档是怎么定义 $attrs 的， 在尤大大的文档中这样介绍了 $attrs：

$attrs: 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件

$attrs 包含了传入到父作用域中没有在 props 声明的其他 props，因此我们可以用 $attrs 去代替那些父组件中不需要的而子组件需要的 props， 通过 v-bind="$attrs" 统一传递给后代。这样就避免了一个个声明然后再一个个传递。

上面这一行代码就通过 v-bind="$attrs" 的方式将本作用域中不作为 prop 的其他属性传递给了 blog-post 组件。

父组件通过 $attrs 传递给后代组件后，后代组件如果想通过触发事件来更新父组件状态该如何处理？如果一级一级地往上 emit 事件，会不会弄得代码太繁琐复杂了？在 Vue 中可以通过 $listeners 解决这个问题，先看看官方文档关于 $listeners 的说明：

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件--在创建更高层次的组件时非常有用。

文档中说了 $listeners 包含了父作用域中的事件监听器。意思就是 $listeners 表示了父组件中的事件监听器集合，只要是触发父组件的事件，而不是自己的，就可以用一个 v-on="$listeners"表示。

{{ title }} 

上面的代码示例中，中间层的组件内通过 v-bind="$attrs" 将其余的 Prop 传递给了 Child 组件，再通过 v-on="$listeners" 绑定父作用域中的事件监听器，一旦 emit 就会传给了父组件。

感谢你能够认真阅读完这篇文章，希望小编分享的"vue如何使用$attrs和$listeners进行多层级的数据和事件传递"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!