Vue跨层级组件访问$refs问题：如何获取非子组件的refs？

首先，你遇到的Cannot read property '$emit' of undefined错误，本质是因为你尝试访问的$refs目标组件并不是当前组件的直接子组件——Vue的$refs仅能作用于直接子组件或当前组件内的DOM元素，跨层级时自然拿不到有效引用，更别说调用$emit了。下面给你几个实用的解决方案，你可以根据项目规模和组件关系选择：

1. 使用状态管理库（Pinia/Vuex） #

这是跨组件通信最推荐的方案，尤其适合中大型项目。通过全局状态管理，你可以在任意组件触发状态变更或方法调用，目标组件监听状态变化后执行对应逻辑：

• 比如用Pinia，先定义一个store：

// stores/auth.js
import { defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    triggerLoginAction: false
  }),
  actions: {
    triggerLogin() {
      this.triggerLoginAction = !this.triggerLoginAction // 用状态切换触发监听
    }
  }
})

• 在TheLogin.vue里监听状态变化：

<script setup>
import { useAuthStore } from '@/stores/auth'
import { watch } from 'vue'

const authStore = useAuthStore()

watch(() => authStore.triggerLoginAction, (newVal) => {
  if (newVal) {
    // 这里执行你想要触发的登录组件逻辑，比如打开弹窗、调用内部方法
    console.log('触发登录操作')
  }
})
</script>

• 在OrderSummary.vue里触发动作：

<script setup>
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()

const handleTriggerLogin = () => {
  authStore.triggerLogin()
}
</script>

2. 自定义事件总线（Vue3推荐用mitt） #

如果项目较小，不想引入状态管理库，可以用事件总线实现轻量跨组件通信：

• 先安装mitt：npm install mitt
• 创建一个事件总线实例：

// utils/eventBus.js
import mitt from 'mitt'
export const eventBus = mitt()

• 在TheLogin.vue里订阅事件：

<script setup>
import { eventBus } from '@/utils/eventBus'
import { onMounted, onUnmounted } from 'vue'

const loginHandler = () => {
  // 执行登录组件的逻辑
  console.log('从OrderSummary触发登录操作')
}

onMounted(() => {
  eventBus.on('trigger-login', loginHandler)
})

onUnmounted(() => {
  eventBus.off('trigger-login', loginHandler) // 记得解绑，防止内存泄漏
})
</script>

• 在OrderSummary.vue里发布事件：

<script setup>
import { eventBus } from '@/utils/eventBus'

const handleTriggerLogin = () => {
  eventBus.emit('trigger-login')
}
</script>

3. 使用Provide/Inject（适合有共同祖先的场景） #

如果你的两个组件有共同的上层父组件，可以用Vue的provide/inject特性传递组件引用或方法：

• 在共同的祖先组件里provide TheLogin的refs：

<script setup>
import { ref, provide } from 'vue'
import TheLogin from './TheLogin.vue'

const loginRef = ref(null)
provide('loginRef', loginRef)
</script>

<template>
  <TheLogin ref="loginRef" />
  <!-- 其他组件包括OrderSummary -->
  <OrderSummary />
</template>

• 在OrderSummary.vue里inject并使用：

<script setup>
import { inject } from 'vue'

const loginRef = inject('loginRef')

const handleTriggerLogin = () => {
  if (loginRef.value) {
    // 调用登录组件的方法或访问属性
    loginRef.value.openLoginModal()
  }
}
</script>

注意：provide/inject默认不是响应式的，但如果你传递的是ref或reactive对象，就能保持响应性——这里传递的是ref包装的组件引用，所以可以正常使用。

为什么你的原方法不行？ #

Vue的$refs是基于组件树的直接父子关系建立的，跨层级的组件不在当前组件的直接子节点列表里，所以this.$refs.login会返回undefined，调用$emit自然就报错了。而且$emit本身是子向父传递事件的机制，跨层级时没有对应的父组件接收，所以也不适用这种场景。

内容的提问来源于stack exchange，提问作者Vishwas