vue 父与孙组件的传值

vue 父与孙组件的传值

摘自：.html

多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点杀鸡用牛刀。Vue 2.4 版本提供了另一种方法:

使用 v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中，配合 interitAttrs 选项一起使用。

之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和事件总线的情况下变得简洁，业务清晰。

首先分析以下应用场景：

img

A 组件与 B 组件之间的通信： （父子组件）##
如上图所示，A、B、C三个组件依次嵌套，按照 Vue 的开发习惯，父子组件通信可以通过以下方式实现：

A to B 通过props的方式向子组件传递，
B to A 通过在 B 组件中 $emit

A 组件与 C 组件之间的通信： （跨多级的组件嵌套关系）##
如上图，A 组件与 C 组件之间属于跨多级的组件嵌套关系，以往两者之间如需实现通信，往往通过以下方式实现：

借助 B 组件的中转，从上到下props依次传递，从下至上， e m i t 事 件 的 传 递 ， 达 到 跨 级 组 件 通 信 的 效 果 借 助 V u e x 的 全 局 状 态 共 享 V u e B u s ， 使 用 V u e 的 实 例 ， 实 现 事 件 的 监 听 和 发 布 ， 实 现 组 件 之 间 的 传 递 。 第 一 种 通 过 p r o p s 和 emit事件的传递，达到跨级组件通信的效果 借助Vuex的全局状态共享 Vue Bus，使用Vue的实例，实现事件的监听和发布，实现组件之间的传递。 第一种通过props和 emit事件的传递，达到跨级组件通信的效果借助Vuex的全局状态共享VueBus，使用Vue的实例，实现事件的监听和发布，实现组件之间的传递。第一种通过props和emit的方式，使得组件之间的业务逻辑臃肿不堪，B组件在其中仅仅充当的是一个中转站的作用。
第二种 Vuex的方式，某些情况下似乎又有点大材小用的意味，（仅仅是想实现组件之间的一个数据传递，并非数据共享的概念）。
第三种情况的使用在实际的项目操作中发现，如不能实现很好的事件监听与发布的管理，往往容易导致数据流的混乱，在多人协作的项目中，不利于项目的维护。

a t t r s 以 及 attrs以及 attrs以及listeners的出现解决的就是第一种情况的问题，B组件在其中传递props以及事件的过程中，不必在写多余的代码，仅仅是将 a t t r s 以 及 attrs以及 attrs以及listeners向上或者向下传递即可。

示例代码
如下所示：

父组件（father.vue）

Copy

18

子组件（son.vue）

Copy

我是子组件:

props: {{name}}

$attrs: {{$attrs}}

 <hr>

	<grandson v-bind="$attrs" v-on="$listeners"></grandson>

结果： 我是子组件: props: vicer $attrs: { "age": 18}

孙组件 (grandson.vue)

Copy

我是孙组件:

props: {{age}}

$attrs: {{$attrs}}

知识点总结##
$attrs

当在父组件向子组件传递数据时，并且子组件不声明props，则$attrs包含所有属性的集合。并且会在子组件的根标签中声明被传递的属性。如：

在子组件引入孙组件，并在子组件声明属性v-bind="$attrs"，则可以跨级传递参数

注意：如果子组件声明了props，则$attrs只包含不被声明的props

$listeners

在子组件引入孙组件，并在子组件中声明v-on="$listeners"属性，则孙组件可跨级emit事件,让父组件监听到

Copy
// 跨级发送事件方式一
<button @click="$stC">按钮

//跨级发送事件方式二
mounted () {
this.$emit(‘testC’);
}
inheritAttrs

当在父组件向子组件传递数据时，并且子组件不声明props，默认在

但从父级传递过来的属性子组件不可能完全都用到，有一部分可能要传给孙组件，这时就要在子组件中声明inheritAttrs=false，不继承属性，并通过v-bind=“$attrs"传递给孙组件

上述特性的使用,完全可以降低在不使用Vuex以及Vue bus的情况下，组件跨级传递复杂度。