vue2/vue3 有没有什么办法可以让子组件调用祖组件的所有方法？

Question

比如一个A组件 有N个方法，它有一个孙组件C
有没有什么办法C组件里面可以调用A组件的所有方法？

首先this.$parent 去调用不太可取，因为不知道会嵌套多少层。
其次用 provide/inject 来传递 proxy或者ctx。 build打包后 proxy和ctx就没有了。好像也不行。
将A组件的方法一个个赋值给 provide 也不太行，因为方法有很多 目前有40多个方法了，还会持续增多
有没有其他办法，vue2 vue3 写法都行。

Answer 1

provide / inject和满足你的需求，在A组件（有一个方法XX）直接将this绑定给一个provide变量parentProvide（自定义的变量名），在孙组件C中通过this.parentProvide.XX()就可以调用A组件的XX方法
父组件A

<template>
  <div>
    <h1>父组件</h1>
    <div>{{ parentCount }}</div>
    <button @click="parentCountChange">parentCount+1</button>
    <Child />
  </div>
</template>
<script>
import Child from "./child.vue";
export default {
  components: { Child },
  data() {
    return {
      parentCount: 0,
    };
  },
  provide() {
    return {
      parentProvide: this,
    };
  },
  methods: {
    parentSayHello() {
      console.log("parent Say Hello");
    },
    parentCountChange() {
      this.parentCount++;
    },
  },
};
</script>

孙组件C

<template>
  <div>
    <h1>子或者孙组件或者父组件下更深的组件</h1>
    <button @click="childGetParentThis">childGetParentThis</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  inject: ["parentProvide"],
  created() {
    this.childGetParentThis();
  },
  methods: {
    childGetParentThis() {
      console.log("parentCount", this.parentProvide.parentCount);
      this.parentProvide.parentSayHello();
    },
  },
};
</script>

<style></style>

https://cn.vuejs.org/v2/api/#provide-inject