组件之间传递数据的方式有很多，之所以有这么多的方式，是为了满足不同场景和条件的需求。

一般有三种方式：

事件总线

本文介绍了使用$ attrs的方法。

这是$attrs的官方网站API https://cn.vuejs.org/v2/api/#vm-attrs

这个api是在2.4版本中添加的，那么为什么要添加这个特性呢？看官网怎么解释

它包含的属性绑定(除了类和样式)在父范围内不被识别(和获取)。

当组件没有声明任何prop时，它包含父范围的所有绑定(除了类和样式)。

内部组件——可以通过v-bind='$attrs '传入，这在创建高级组件时非常有用。

第一次看的时候不容易理解。以下是为什么使用它的解释。我来解释一下。

这意味着：$ attrs可以从父组件中收集所有属性，除了那些不是由组件中的道具定义的属性。

推而广之，如果组件的嵌套层次有点深但不那么深，比如三层。

如果我们使用道具，如果最里面的组件想要得到最外面组件的数据，就必须通过中间组件的道具传递。

但是这个道具对中间的组件没有用，它只是作为一个桥梁。当我们写代码时，我们经常会遇到它

这种场景有时候写起来很烦。所以我们有这个$ attrs来帮助我们，我们不需要在中间组件中编写道具来让

最里面的组件从最外面的组件获取数据。

那么，如何使用呢？

看看下面的代码，很容易理解

准备三个组件

里面的代码如下

//祖父父模板div style='background: blue '祖父父：中的父亲-年龄=' 50 ' : child-time=' ` $ { time } ` '/父亲/div/templatescriptimport父亲from '。/父亲节'导出默认{组件： {父亲}，数据(){返回{时间：新日期()。getTime() } }}/script//父模板div style='background: red '父div中的子代span父代age :/span { {父辈}} /div子代v-bind=' $ attrs '/child/div/templatescriptionimport child from '。/child ' export default { components : { child }，prop : {父代： { type: Number，default : 0 } }/script//child template div style=' background : green ' div child/div time : { { child time } }/div/div/templatescript export default { prop : { child time 3: { type 333: String，default 33: ' ' } } } }

需要从祖父母组件直接传输到子组件的数据不应该在父组件的道具中声明。

在子组件上，父组件中未声明的数据以及子组件从祖父母组件获取的数据可以被传输到子组件。

当然，子组件道具必须声明，这就是道具的用法。

摘要

如上所述，组件之间的数据传输功能是通过使用边肖推出的vue中的$attrs来实现的。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！