Vue中<router-view>渲染的子组件emit事件无法触发父组件方法如何解决

你遇到的触发失败是两个常见问题导致的：

• 第一是事件名不匹配：子组件抛出的事件名和父组件监听的事件名不一致
  子组件通过this.$emit('logoutUser', this.user)抛出的是名为logoutUser的事件，但父组件router-view上监听的是v-on:logout="logoutUser"，监听的事件名为logout，两边名称对不上自然无法触发回调。
• 第二是Vue3+Vue Router v4环境下的绑定规则问题：如果你用的是Vue3，直接将事件、属性绑定在<router-view>标签上是不会透传给内部渲染的路由组件的，必须通过v-slot拿到组件实例再绑定。

方案1：先修正事件名匹配（所有Vue版本通用第一步） #

二选一修改即可：

• 修改子组件抛出的事件名，和父组件监听的保持一致

  methods: {
      logout () {
          console.log("logout child")
          // 把事件名改成父组件监听的logout
          this.$emit('logout', this.user)
      }
  },
  

• 或者修改父组件的监听事件名，和子组件抛出的保持一致

  <router-view 
      v-if="user.isConnected && user.username != ''" 
      :userProp="user" 
      <!-- 把监听的事件名改成子组件抛出的logoutUser -->
      v-on:logoutUser="logoutUser"
  ></router-view>
  

额外优化：Vue模板中不需要写this.前缀，直接访问实例属性即可，你原来的v-if="this.user.xxx"可以简化为v-if="user.xxx"，避免不必要的报错。

方案2：Vue3环境额外调整router-view写法 #

如果是Vue3 + Vue Router v4的环境，修改完事件名后还要调整router-view的透传写法：

<router-view 
  v-if="user.isConnected && user.username != ''" 
  v-slot="{ Component }"
>
  <!-- 把属性和事件都绑定在动态component上，才能正确透传给路由组件 -->
  <component 
    :is="Component" 
    :userProp="user"
    @logoutUser="logoutUser"
  />
</router-view>

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