孙子组件调用爷爷组件

为了实现孙子组件调用爷爷组件的方法，我们可以采用以下步骤：
1. 在爷爷组件中定义一个方法，用于被孙子组件调用。
2. 在爷爷组件中使用provide来提供这个方法。
3. 在父组件中使用inject来注入这个方法。
4. 在孙子组件中使用this.\$parent.\$parent来访问爷爷组件，并调用提供的方法。

下面是一个示例代码，演示了如何实现孙子组件调用爷爷组件的方法：

<!-- 爷爷组件 -->
<template>
  <div>
    <h2>我是爷爷组件</h2>
    <<爷爷组件内容>>
    <父组件 :list="list"></父组件>
  </div>
</template>

<script>
export default {
  methods: {
    // 定义一个方法，用于被孙子组件调用
    grandpaMethod() {
      console.log('我是爷爷组件的方法');
    },
  },
  provide() {
    return {
      grandpaMethod: this.grandpaMethod,
    };
  },
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <h3>我是父组件</h3>
    <<父组件内容>>
    <孙子组件></孙子组件>
  </div>
</template>

<script>
export default {
  inject: ['grandpaMethod'],
  props: {
    list: Array,
  },
};
</script>

<!-- 孙子组件 -->
<template>
  <div>
    <h4>我是孙子组件</h4>
    <<孙子组件内容>>
    <button @click="callGrandpaMethod">调用爷爷组件的方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    callGrandpaMethod() {
      // 使用this.$parent.$parent来访问爷爷组件，并调用提供的方法
      this.$parent.$parent.grandpaMethod();
    },
  },
};
</script>