这篇文章主要介绍了Vue祖孙组件怎么实现传值的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue祖孙组件怎么实现传值文章都会有所收获，下面我们一起来看看吧。

祖孙组件，也就是 3 层嵌套的组件。关于 vue 中父子组件之间的数据传递是通过 props 和 $emit 实现，参考 Vue 父子组件传值。

那祖孙组件之间传值怎么实现，先了解下面的几个 vue 属性。

当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象 property 的访问。

$attrs 是一个 Object，它包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。

如果组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。

怎么理解呢？

就是父组件绑定到子组件上的属性，在子组件中没有声明 props 进行接收的那些属性会被包含在 attrs 中，举个栗子

在父组件中对子组件绑定了两个属性 data1 data2。

parent.vue

但在子组件的 props 只对 data1 做了接收声明，那 data2 就会被包含在 $attrs 中。

在子组件中也是可以取到 $attrs 的值的，既然是对象，那就还可以按照属性名来取值的。

child.vue