【vue2项目】爷孙组件怎么传值和调用方法

爷孙组件通信

项目是旧项目，用的vue2，所以以下方法都是针对的vue2哈

场景

有一个table上面有操作项，有查看按钮，这个table叫做爷爷组件，点击查看操作，打开弹窗又是一个table，这个table叫做父亲组件，弹窗的table上也有操作按钮，会打开第二个弹窗，第二个弹窗就是孙子组件。
孙子组件更新状态后，只会回到父亲组件页面，但是爷爷组件上有状态也需要更新，所以要用到爷孙通信

孙子组件想要爷爷组件的数据

1. $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中接收，那么爷组件传递给父组件的数据就会存放到父组件的$attrs对象中里面了，然后，再通过v-bind="$attrs"，再把这个$attr传递给孙组件，在孙组件中使用props就能接收到$attrs中的数据了，这样就实现了，祖孙之间的数据传递

祖孙之间的数据传递，需要通过中间的父组件$attrs做一个桥梁。其实就是这个意思。

注意：$attrs一般搭配interitAttrs 一块使用，一般是inheritAttrs: false, // 默认会继承在html标签上传递过来的数据.

参考原文链接：详细讲解vue中祖孙组件间的通信之使用$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 ，后面再研究……