如何在 nuxt 布局中监听页面 $emit ？

Question

Nuxt 2.15.6；我想通过动态切换根布局中的菜单组件来切换菜单组件的布局。

default.vue

<template>
  <component :is="navLayout"></component>
  <Nuxt :navLayout="navLayout = $event" />
</template>

data() {
  return {
    navLayout: "default"
  };
},

在我的页面的“子”组件中，例如。login.vue (/login) I$emit一个事件；

...
import nav2 from "@/layouts/nav2";
...
created() {
  this.$emit("navLayout", nav2);
},

现在看来该<Nuxt>组件无法捕获该事件。我也尝试过调用一个<Nuxt @navLayout="test()" />方法。

我怎样才能避免this.$root.$emit(...);在我login.vue和

this.$root.$on("navLayout", navLayout => {
  this.navLayout = navLayout;
});

在default.vue？

Answer 1

编辑：这个答案工作正常，因为看起来你现在不能这样做： https: //github.com/nuxt/nuxt.js/issues/8122#issuecomment-709443008

在子组件中

<button @click="$nuxt.$emit('eventName', 'nice payload')">nice</button>

在默认布局上

<script>
export default {
  created() {
    this.$nuxt.$on('eventName', ($event) => this.test($event))
  },
  methods: {
    test(e) {
      console.log('test ok >>', e)
    },
  },
}
</script>

将侦听器放在Nuxt其自身上是行不通的。

<Nuxt @navLayout="navLayout = $event" :navLayout="navLayout" />

我可以看到事件发生并且侦听器已插入<nuxt></nuxt>，但它不会触发侦听器的任何方法...

<nuxt-child></nuxt-child>PS：至少有效。