如何获取vue-router路由页面组件引用并订阅其事件？

这个场景我太熟悉了！因为路由渲染的组件不是我们手动写的<page>标签，常规的@event绑定确实没法直接用。别担心，给你几个实用的解决方案，根据你的Vue版本和场景选就行：

如果你用的是Vue3，这是最省心的方法——<router-view>会自动把绑定的事件透传给当前渲染的路由组件。直接在父组件里这么写：

<template>
  <router-link to="page">跳转到Page</router-link>
  <!-- 直接在router-view上绑定事件 -->
  <router-view @your-event-name="handlePageEvent"></router-view>
</template>

<script setup>
const handlePageEvent = (eventData) => {
  console.log('收到Page组件的事件啦：', eventData)
  // 这里写你的处理逻辑
}
</script>

然后在Page组件里正常用defineEmits声明并触发事件就行：

<script setup>
const emit = defineEmits(['your-event-name'])

// 触发事件的地方
const triggerMyEvent = () => {
  emit('your-event-name', { message: '来自Page的消息' })
}
</script>

如果是Vue2，或者你需要更灵活的组件实例操作，可以给<router-view>加ref，拿到当前渲染的Page组件实例后手动绑定事件监听。

Vue2 写法 #

<template>
  <router-link to="page">跳转到Page</router-link>
  <router-view ref="pageView"></router-view>
</template>

<script>
export default {
  mounted() {
    // 初始渲染时绑定监听
    this.bindPageEvent()
    // 路由切换时重新绑定（避免旧组件的监听残留）
    this.$watch('$route', () => {
      this.$nextTick(() => {
        this.bindPageEvent()
      })
    })
  },
  methods: {
    bindPageEvent() {
      // Vue2里router-view的$children[0]就是当前渲染的组件实例
      const pageComponent = this.$refs.pageView?.$children[0]
      if (pageComponent) {
        // 先移除旧监听，防止重复绑定
        pageComponent.$off('your-event-name')
        // 绑定新监听
        pageComponent.$on('your-event-name', (data) => {
          console.log('收到Page组件的事件：', data)
        })
      }
    }
  },
  beforeDestroy() {
    // 页面销毁时清理监听
    const pageComponent = this.$refs.pageView?.$children[0]
    pageComponent?.$off('your-event-name')
  }
}
</script>

Vue3 写法 #

Vue3里router-view的ref会直接指向当前渲染的组件实例，不用取$children：

<template>
  <router-link to="page">跳转到Page</router-link>
  <router-view ref="pageView"></router-view>
</template>

<script setup>
import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { useRoute } from 'vue-router'

const pageView = ref(null)
const route = useRoute()
let eventListener = null

const bindPageEvent = () => {
  if (pageView.value) {
    // 先移除旧监听
    if (eventListener) {
      pageView.value.$off('your-event-name', eventListener)
    }
    // 定义监听函数
    eventListener = (data) => {
      console.log('收到Page组件的事件：', data)
    }
    // 绑定新监听
    pageView.value.$on('your-event-name', eventListener)
  }
}

onMounted(() => {
  bindPageEvent()
})

// 路由切换时重新绑定
watch(route, async () => {
  await nextTick()
  bindPageEvent()
})

onBeforeUnmount(() => {
  // 清理监听
  if (pageView.value && eventListener) {
    pageView.value.$off('your-event-name', eventListener)
  }
})
</script>

如果你的组件层级比较复杂，或者不想依赖路由的写法，事件总线是个通用方案——本质是用一个全局的事件中心来传递消息。

Vue2 写法 #

直接用Vue实例当总线：

// main.js
import Vue from 'vue'
Vue.prototype.$bus = new Vue()

Page组件触发事件：

// Page.vue
this.$bus.$emit('your-event-name', { message: '我是Page的事件' })

父组件订阅事件：

// 父组件mounted钩子
mounted() {
  this.$bus.$on('your-event-name', (data) => {
    console.log('收到总线事件：', data)
  })
},
beforeDestroy() {
  // 必须销毁监听，防止内存泄漏
  this.$bus.$off('your-event-name')
}

Vue3 写法 #

Vue3移除了Vue.prototype，可以用轻量库mitt或者自己写个简单的总线：

// 创建bus.js文件
export const bus = {
  events: {},
  emit(eventName, data) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(fn => fn(data))
    }
  },
  on(eventName, fn) {
    if (!this.events[eventName]) {
      this.events[eventName] = []
    }
    this.events[eventName].push(fn)
  },
  off(eventName, fn) {
    if (this.events[eventName]) {
      this.events[eventName] = this.events[eventName].filter(f => f !== fn)
    }
  }
}

Page组件触发：

// Page.vue
import { bus } from './bus.js'
bus.emit('your-event-name', { message: '来自Page的消息' })

父组件订阅：

// 父组件
import { bus } from './bus.js'
import { onMounted, onBeforeUnmount } from 'vue'

onMounted(() => {
  bus.on('your-event-name', handleEvent)
})

onBeforeUnmount(() => {
  bus.off('your-event-name', handleEvent)
})

const handleEvent = (data) => {
  console.log('收到总线事件：', data)
}

如果你的事件是和状态变更相关的（比如提交表单、更新数据），用状态管理会更规范，也能避免事件总线的混乱。比如用Pinia：

1. 先定义一个store：

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

export const usePageStore = defineStore('page', {
  state: () => ({
    eventData: null
  }),
  actions: {
    triggerPageEvent(data) {
      this.eventData = data
      // 也可以在这里做其他逻辑
    }
  }
})

2. Page组件触发事件：

<script setup>
import { usePageStore } from '@/stores/pageStore'
const pageStore = usePageStore()

const triggerEvent = () => {
  pageStore.triggerPageEvent({ message: '来自Page的事件' })
}
</script>

3. 父组件监听状态变化：

<script setup>
import { usePageStore } from '@/stores/pageStore'
import { watch } from 'vue'

const pageStore = usePageStore()

watch(() => pageStore.eventData, (newData) => {
  if (newData) {
    console.log('收到状态变化：', newData)
    // 处理逻辑后可以重置状态
    pageStore.eventData = null
  }
}, { deep: true })
</script>

如果父组件和Page组件是路由嵌套的层级关系，Vue3的Provide/Inject可以直接把父组件的方法传递给子组件，子组件调用方法就相当于触发事件：

父组件提供方法：

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

const handlePageEvent = (data) => {
  console.log('收到Page组件的调用：', data)
  // 处理逻辑
}

// 把方法提供给子组件
provide('handlePageEvent', handlePageEvent)
</script>

Page组件注入并调用：

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

// 注入父组件提供的方法
const handlePageEvent = inject('handlePageEvent')

// 需要触发事件时调用
const triggerEvent = () => {
  handlePageEvent({ message: '我是Page的消息' })
}
</script>

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