如何在 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) 我$emit一个事件;

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

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

如何在我的 login.vue 和

中避免 this.$root.$emit(...);

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

在 default.vue?

Answer 1

也许我没有正确理解你的问题，但在我看来，你正在尝试自己做布局的目的。这意味着您将使用用于登录的菜单组件、默认布局等创建布局，如下所示：

login.vue

<template>
  <LoginMenu>
  <Nuxt/>
</template>

default.vue

<template>
  <DefaultMenu>
  <Nuxt/>
</template>

在你的页面上你会做：

export default {
   layout: login
}

然后加载带有登录菜单组件的布局。在所有其他页面上，它将加载默认菜单。

更多信息在这里：https://nuxtjs.org/examples/layouts/

Answer 2

编辑：这个答案很好，因为看起来你现在不能这样做：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> 但它不会触发侦听器的任何方法...

PS：至少适用于 <nuxt-child></nuxt-child>。

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

How to listen for a page $emit in a nuxt layout?

dom-events

vue.js

nuxt.js