Nuxt2中如何在布局内监听页面组件触发的$emit事件

Nuxt 2 的 <Nuxt> 组件是路由出口的封装，本身不会自动透传页面子组件触发的自定义事件到父布局层，所以你直接在 <Nuxt> 标签上绑定自定义事件监听，是无法收到页面组件$emit的事件的，以下是3种不用全局事件的可行方案：

方案1：使用页面meta自定义字段（最轻量化，无需事件通信） #

适合菜单布局和路由页面对应的场景，不需要主动触发事件，配置即可生效。

步骤1：改造根布局default.vue #

监听路由变化，读取当前页面的meta配置

// default.vue js部分
export default {
  data() {
    return {
      navLayout: "default"
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler(route) {
        // 读取页面meta里的navLayout配置，没有就用默认值
        this.navLayout = route.meta?.navLayout || "default"
      }
    }
  }
}

步骤2：在需要自定义菜单的页面配置meta #

login.vue不需要写$emit逻辑，直接加meta配置即可：

import nav2 from "@/layouts/nav2";
export default {
  // 自定义meta字段
  meta: {
    navLayout: nav2
  },
  // 原有业务逻辑保持不变
}

方案2：使用provide/inject（适合跨层级直接通信，无需全局状态） #

如果你有动态切换菜单的需求（不是页面固定对应菜单），可以用Vue原生的依赖注入实现，不需要走全局事件。

步骤1：根布局default.vue提供修改方法 #

// default.vue js部分
export default {
  data() {
    return {
      navLayout: "default"
    };
  },
  provide() {
    return {
      // 提供修改导航布局的方法给子孙组件调用
      setNavLayout: (layout) => {
        this.navLayout = layout
      }
    }
  }
}

步骤2：页面组件注入方法直接调用 #

login.vue中直接调用注入的方法即可：

import nav2 from "@/layouts/nav2";
export default {
  // 注入根布局提供的方法
  inject: ['setNavLayout'],
  created() {
    // 直接调用方法修改布局，不用emit
    this.setNavLayout(nav2)
  }
}

方案3：使用Vuex全局状态管理（适合大型项目多组件共享布局状态） #

如果你的布局状态需要在多个地方修改/读取，用Vuex是最规范的方案，Nuxt2默认内置Vuex无需额外安装。

步骤1：新建store/layout.js #

// store/layout.js
export const state = () => ({
  navLayout: 'default'
})

export const mutations = {
  SET_NAV_LAYOUT(state, layout) {
    state.navLayout = layout
  }
}

步骤2：根布局default.vue绑定状态 #

// default.vue js部分
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('layout', ['navLayout'])
  }
}

步骤3：页面组件提交mutation修改状态 #

login.vue中提交mutation即可：

import nav2 from "@/layouts/nav2";
export default {
  created() {
    this.$store.commit('layout/SET_NAV_LAYOUT', nav2)
  }
}

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