Vue.js：如何从router-view外部组件触发自定义事件？

问题原因 #

你在NavBar组件里调用this.$emit("user-logged-out")，但App.vue的<NavBar>标签上没有监听这个事件，所以App.vue的getLoggedOutUserInfo方法根本不会被触发——这就是事件无效的核心原因。

快速解决方法（直接监听事件） #

修改App.vue的模板部分，给<NavBar>绑定@user-logged-out事件，和你给router-view绑定事件的逻辑一致：

<template>
    <div>
        <!-- 新增@user-logged-out事件绑定 -->
        <NavBar :userId="userId" :loggedIn="isLoggedIn" @user-logged-out="getLoggedOutUserInfo" />
        <router-view :userId="userId"
            @user-logged-in="getLoggedInUserInfo" 
            @user-logged-out="getLoggedOutUserInfo">
        </router-view>
    </div>
</template>

这样NavBar里触发this.$emit("user-logged-out")时，App.vue的getLoggedOutUserInfo方法就会执行，更新userId和isLoggedIn状态，进而同步更新NavBar的菜单项。

进阶方案：用状态管理统一维护登录状态 #

如果你的项目后续会扩展，建议用状态管理工具（Vue3用Pinia，Vue2用Vuex）来统一管理登录状态，避免组件间频繁传值和触发事件，代码更清晰。

以Pinia为例（Vue3）：

1. 创建状态管理文件stores/auth.js：

import { defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    userId: null,
    isLoggedIn: false
  }),
  actions: {
    // 登录动作
    login(userData) {
      this.userId = userData.user.userId
      this.isLoggedIn = true
    },
    // 登出动作
    logout() {
      this.userId = ''
      this.isLoggedIn = false
    }
  }
})

2. 修改App.vue，直接从状态管理取数据，无需手动传props和监听事件：

<template>
    <div>
        <NavBar />
        <router-view />
    </div>
</template>

<script setup>
import NavBar from '@/components/NavBar.vue'
import { useAuthStore } from '@/stores/auth'
// 初始化状态管理实例
const authStore = useAuthStore()
</script>

3. 修改NavBar组件，直接调用状态管理的登出方法：

<template>
    <!-- 根据状态显示菜单项 -->
    <div v-if="authStore.isLoggedIn">
        <span>用户ID: {{ authStore.userId }}</span>
        <button @click="handleLogout">登出</button>
    </div>
    <div v-else>
        <router-link to="/login">登录</router-link>
    </div>
</template>

<script setup>
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()

const handleLogout = () => {
    // 直接调用状态管理的登出方法
    authStore.logout()
}
</script>

4. 修改Login.vue，调用状态管理的登录方法：

<script setup>
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
const authStore = useAuthStore()
const router = useRouter()

const handleLoginSuccess = (data) => {
    // 直接调用状态管理的登录方法
    authStore.login(data)
    // 跳转到首页等逻辑
    router.push('/')
}
</script>

这种方式下，所有组件共享同一套登录状态，状态更新时所有依赖组件会自动同步，无需手动处理事件传递，更适合中大型项目。

内容的提问来源于stack exchange，提问作者DXB-DEV