vue2孙组件获取爷组件$refs

在Vue 2中，孙子组件想要获取爷爷组件的`$refs`引用通常需要通过事件总线或者Vuex状态管理工具，因为直接父子、祖孙之间的数据传递通常是单向数据流，避免了深度嵌套的`this.$parent`或`this.$grandparent`。

1. **事件总线**：你可以创建一个全局的事件中心，当爷爷组件设置`ref`并触发一个事件时，孙子组件可以监听这个事件来获取`$refs`的相关信息。

// 爷爷组件
<template>
  <button @click="emitGrandparentRef">点击获取ref</button>
  <Child ref="childRef" />
</template>

<script>
export default {
  methods: {
    emitGrandparentRef() {
      this.$emit('get-grandparent-ref', this.childRef);
    }
  }
};
</script>

// 孙子组件
<template>
  <div>{{ grandparentRef }}</div>
</template>

<script>
import bus from '@/events/bus'; // 假设你有一个全局事件中心

export default {
  mounted() {
    bus.on('get-grandparent-ref', (grandparentRef) => {
      this.grandparentRef = grandfatherRef;
    });
  },
  beforeDestroy() {
    bus.off('get-grandparent-ref');
  }
};
</script>

2. **Vuex**：如果数据需要在整个应用共享，也可以考虑使用Vuex来存储和获取`$refs`。爷爷组件将`ref`值保存在store中，孙子组件订阅这个数据即可。

// store.js
state: {
  childRef: null,
},
actions: {
  setGrandparentRef({ commit }, ref) {
    commit('SET_CHILD_REF', ref);
  }
},
mutations: {
  SET_CHILD_REF(state, ref) {
    state.childRef = ref;
  }
}

// 爷爷组件
methods: {
  setChildRef() {
    this.$refs.childRef && this.$store.dispatch('setGrandparentRef', this.$refs.childRef);
  }
}

// 孙子组件
computed: {
  grandparentRef() {
    return this.$store.state.childRef;
  }
}