Vue Router里怎么用emit传值？和组件通信有啥不一样？

做Vue项目时，很多同学用Vue Router管理页面跳转，碰到路由组件之间传值就犯难：路由里的emit和普通组件的emit到底咋用？传值时为啥没反应？和普通组件通信区别在哪？今天就把Vue Router里emit传值的逻辑、操作、差异这些点拆明白,帮你少踩坑。

路由组件和普通组件的“归属”差异

先得搞清楚路由组件和普通组件在父级关系上的区别，普通组件是“父组件直接写标签引入”，比如父组件里写<ChildComponent />，子组件的父级就是这个写标签的组件，但路由组件是通过<router-view>渲染出来的，它的“父级载体”是包含<router-view>的那个组件（比如App.vue，或者某个布局组件）。

举个例子：App.vue里有<router-view/>，当访问/home时，Home.vue作为路由组件被<router-view>渲染，这时候Home.vue的“父级”不是App.vue里的某个普通标签，而是<router-view>这个路由占位符，这种“间接父子”的关系，直接影响了emit的监听方式——普通组件是在父组件的<ChildComponent>标签上绑事件，路由组件得在<router-view>标签上绑事件。

Vue Router中emit传值的具体操作步骤

知道了归属差异，实操就有方向了，以“路由组件（Home.vue）向父级载体（App.vue）传值”为例，分四步走：

确定父级载体

先找到哪个组件里有<router-view>，比如大部分项目的根组件App.vue里会有<router-view/>，那App.vue就是Home.vue的父级载体。

给<router-view>绑定自定义事件

在父级载体（App.vue）的模板中，给<router-view>加上事件绑定，比如要监听“send-data”事件，就写：

<template>
  <div id="app">
    <!-- 关键：在router-view上绑事件 -->
    <router-view @send-data="handleRouterData" />
  </div>
</template>
<script>
export default {
  methods: {
    handleRouterData(data) {
      console.log('收到路由组件传的数据：', data)
    }
  }
}
</script>

路由组件内部触发emit

在路由组件（Home.vue）里，通过this.$emit触发事件并传参，比如点击按钮时传值：

<template>
  <button @click="sendDataToParent">给父级传值</button>
</template>
<script>
export default {
  methods: {
    sendDataToParent() {
      // 触发事件，传参可以是任意类型
      this.$emit('send-data', { msg: '我是路由页Home传的数据' })
    }
  }
}
</script>

父级载体处理传过来的数据

父级载体（App.vue）里的handleRouterData方法会接收到传参，想存到data、调接口还是做其他逻辑，都能处理。

和普通组件emit通信的核心区别

很多同学混淆路由组件和普通组件的emit，本质是没分清父子关系的建立方式，这两类场景至少有3个核心区别：

事件监听的“载体”不同

普通组件的父组件，是在子组件标签上监听事件，比如父组件写<Child @custom-event="xxx"/>；但路由组件的父级载体，得在<router-view>上监听事件，因为路由组件是被<router-view>渲染出来的，不是直接写在父组件模板里的标签。