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

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

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

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

<!-- 静态的prop -->
<blog-post title="My journey with Vue"></blog-post>
<!-- 动态的prop -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 动态的prop传递可以简写成 -->
<blog-post :title="post.title"></blog-post>
<!-- 需要传递多个prop的时候，可以一起写在v-bind上 -->
<blog-post v-bind="{ editable, title: post.title}"></blog-post>

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

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

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

<blog-post v-bind="$attrs"></blog-post>

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

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

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

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

<!-- 父组件（第一层组件） -->
<componentA @on-change="handleChange" v-bind="{ editable, title: post.title}" />

<!-- 中间层的组件 -->
<Child v-bind="$attrs" v-on="$listeners"/>

<!-- 数据传递的目标组件，事件触发的组件 -->
<div @click="handleClick">{{ title }} </div>
<script>
  export default {
    props: {
      title: String
    }
    handleClick() {
      this.$emit('on-change', 'New Title');
    }
  }
</script>

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

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