Question

2018-12-23

4371

javascript vue.js nuxt.js

我正在开发 nuxt.js 项目，在尝试从插件访问事件时收到错误 无法读取未定义的属性“$nuxt” 。

在 ~/plugins/myPlugin.js

import Vue from 'vue';

this.$nuxt.$on('emit-height', (payload) => {
  Vue.prototype.$bannerHeight = payload;
});

在 ~/plugins/nuxt.config.js

plugins: [
  '~/plugins/get-main-banner-height.js',
]

this.$nuxt.$on 中导入如果我在任何组件中使用它，它就会起作用，但在插件中不起作用，如上所述。

在我的组件中，我正在发射高度。

methods: {
  getMainBannerHeight() {
    this.$nextTick(() => {
      this.$nuxt.$emit('emit-main-banner-height', this.bannerHeight);
    });
  },
}

所以，我的问题是“如何在插件中监听/捕获事件”？

Answer 1

您可以在 nuxt 插件上下文中引用应用程序。文档 https://nuxtjs.org/api/context/

import Vue from 'vue';

export default ({ app }) => {
  app.$on('emit-height', (payload) => {
    Vue.prototype.$bannerHeight = payload;
  });
}