【vue2项目】爷孙组件怎么传值和调用方法
爷孙组件怎么传值和调用方法
- 爷孙组件通信
- 场景
- 孙子组件想要爷爷组件的数据
- 孙子组件调用爷爷组件的方法
- 其他
爷孙组件通信
项目是旧项目，用的vue2，所以以下方法都是针对的vue2哈
场景
有一个table上面有操作项，有查看按钮，这个table叫做爷爷组件，点击查看操作，打开弹窗又是一个table，这个table叫做父亲组件，弹窗的table上也有操作按钮，会打开第二个弹窗，第二个弹窗就是孙子组件。
孙子组件更新状态后，只会回到父亲组件页面，但是爷爷组件上有状态也需要更新，所以要用到爷孙通信
孙子组件想要爷爷组件的数据
- $attr 方法
类型：{ [key: string]: string }
包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=“$attrs” 传入内部组件——在创建高级别的组件时非常有用。
理解：$attrs就是一个容器对象，这个容器对象会存放:父组件传过来的且子组件未使用props声明接收的数据
- 爷爷组件：通过props传递给父组件
<son:id="id" />
- 爸爸组件：在孙子组件上绑定$attr
<grondSon v-bind="$attr" />
- 孙子组件接收
<span>{{$attr.id}}</span>
总结，其实，爷组件传递给孙组件的逻辑流程就是，通过爷组件首先传递给父组件，当然父组件不在props中接收，那么爷组件传递给父组件的数据就会存放到父组件的 a t t r s 对象中里面了，然后，再通过 v − b i n d = " attrs对象中里面了，然后，再通过v-bind=" attrs对象中里面了，然后，再通过v−bind="attrs"，再把这个 a t t r 传递给孙组件，在孙组件中使用 p r o p s 就能接收到 attr传递给孙组件，在孙组件中使用props就能接收到 attr传递给孙组件，在孙组件中使用props就能接收到attrs中的数据了，这样就实现了，祖孙之间的数据传递
祖孙之间的数据传递，需要通过中间的父组件$attrs做一个桥梁。其实就是这个意思。
注意：$attrs一般搭配interitAttrs 一块使用，一般是inheritAttrs: false, // 默认会继承在html标签上传递过来的数据.
参考原文链接：详细讲解vue中祖孙组件间的通信之使用 a t t r s 和 attrs和 attrs和listeners的方式（篇幅略长，建议收藏）
孙子组件调用爷爷组件的方法
方法一：provide 和 inject
类型：
provide：Object | () => Object
inject：Array | { [key: string]: string | Symbol | Object }
- 爷爷组件：先用provide抛出去
provide: function () {return {getMap: this.getMap}
}
- 孙子组件：用inject接收
inject: ['getMap']
参考官网说明：
依赖注入
provide / inject
方法二： $listener
$listeners可以将子组件emit的方法通知到爷组件
- 父组件：绑定$listener
<sun v-bind="$attrs" v-on="$listeners"></sun>
- 爷爷组件定义要被触发的方法
refresh(payload) {console.log("孙传祖", payload);},
- 孙子组件
this.$emit("refresh", this.data)
其他
还有vuex， $on $bus ，后面再研究……