在vue中通过使用$attrs实现组件之间的数据传递

r囧r小猫 2022-12-13 04:33 142阅读 0赞

# #

> 组件之间传递数据的方式有很多种，之所以有这么多种方式，是为了满足在不同场景不同条件下的使用。

一般有三种方式：

1.  通过 `props` 的方式向子组件传递(父子组件)
2.  `vuex` 进行状态管理
3.  非父子组件的通信传递 `Vue Event Bus`，使用Vue的实例，实现事件的监听和发布，实现组件之间的传递

本文介绍的是使用$attrs的方式。

这是$attrs的官网api [https://cn.vuejs.org/v2/api/\#vm-attrs][https_cn.vuejs.org_v2_api_vm-attrs]

## 这个api是在2.4版本中添加的，那么为什么要添加这个特性呢？ ##

看看官网是怎么解释的

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (`class` 和 `style` 除外)。

当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (`class` 和 `style` 除外)，

并且可以通过 `v-bind="$attrs"` 传入内部组件——在创建高级别的组件时非常有用。

第一次看的话真是不容易看懂，这里是既包含用法又隐晦的说明了为什么使用，还是我来解释一下吧。

意思就是：`$attrs` 可以收集父组件中的所有传过来的属性除了那些在组件中没有通过 `props` 定义的。

引申说明一下，如果组件的嵌套层级有点深但又不那么深，比如三层。

我们如果使用props的话，最里面的组件想要获取最外层组件的数据，就要通过中间的组件的props来传递，

但是这个props对于中间的这个组件没啥用处，它就是做了一个桥梁而已。我们平时写代码时候其实经常碰到

这种场景，写起来有时候觉得挺烦的。所以就有了这个$attrs来帮助我们，不必在中间组件中写props就可以让

最里面的组件拿到最外面组件传进来的数据。

## 那么，具体怎么使用呢？ ##

看看下面的代码吧，很简单就懂了

准备三个组件

![230a5be7d59392a2eb79c475f67e37bf.png][]

里面的代码如下

//grandfather
    <template>
      <div style="background: blue">
        father in grandfather
        <father :father-age="50" :child-time="`${time}`"></father>
      </div>
    </template>
    <script>
    import father from './father'
    export default {
      components: {
        father
      },
      data () {
        return {
          time: new Date().getTime()
        }
      }
    }
    </script>
    
    //father
    <template>
      <div style="background: red">
        child in father
        <div>
          <span>father age:</span>{
       {fatherAge}}
        </div>
        <child v-bind="$attrs"></child>
      </div>
    </template>
    <script>
    import child from './child'
    export default {
      components: {
        child
      },
      props: {
        fatherAge: {
          type: Number,
          default: 0
        }
      }
    }
    </script>
    
    //child<template>
      <div style="background: green">
        <div>child</div>
        <div>time: {
       {childTime}}</div>
      </div>
    </template>
    <script>
    export default {
      props: {
        childTime: {
          type: String,
          default: ''
        }
      }
    }
    </script>

需要从爷爷组件直接传给子组件的数据，不要在父组件中的props中声明。

在子组件上通过v-bind的方式就可以把父组件中未声明而子组件需要从爷爷组件中获取的数据传给子组件。

当然，子组件props肯定是要声明的，还是props的用法啦。

[https_cn.vuejs.org_v2_api_vm-attrs]: https://cn.vuejs.org/v2/api/#vm-attrs
[230a5be7d59392a2eb79c475f67e37bf.png]: /images/20221123/c17d41b971144f5aa88111c64a737075.png