vue ref爷孙 组件通信

Vue中的组件通信有多种方式，其中一种常见的方式是使用`ref`属性进行爷孙组件之间的通信。

首先，在爷组件中，可以使用`ref`属性给子组件赋予一个特定的引用名。例如：

<template>
  <div>
    <child ref="childComponent"></child>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  mounted() {
    console.log(this.$refs.childComponent); // 子组件的引用
  }
}
</script>

然后，在孙组件中，可以通过`$parent`属性访问到爷组件的实例，并从中获取相应的数据或调用方法。例如：

<template>
  <div>
    <button @click="sendMessageToGrandpa">发送消息给爷爷</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessageToGrandpa() {
      this.$parent.someMethodInGrandpa(); // 调用爷组件的方法
      this.$parent.someDataInGrandpa = 'Hello Grandpa'; // 修改爷组件的数据
    }
  }
}
</script>

通过在爷组件中使用`ref`属性获取到子组件的引用，再通过`$parent`属性在孙组件中访问到爷组件，就可以实现爷孙组件之间的通信。请注意，这种方式只适用于爷组件直接包含孙组件的情况。如果组件层级很深，则会变得复杂，可以考虑使用其他更灵活的通信方式，如事件总线、Vuex 状态管理等。