Vue.js 可以从页面调用nuxt中的组件方法吗？

我开始使用Vue.js，并使用Nuxt.js。 我创建了一个组件（snackbar），在这个组件中我创建了一个方法“showSnackbar”，它可以传递两个参数：颜色和文本。 因此，当我调用showSnackbar（颜色、文本）时，它就会出现

但是，我想从一个页面调用这个方法。因为我想在某些页面中使用这个snackbar，我不想一直编写相同的代码，所以这就是我决定创建组件的原因。但我无法从页面调用此组件中的方法

---

这就是为什么我想知道是否有可能从一个页面调用一个组件方法（当然我会在那里导入组件）

可能有几种方法可以做到这一点，我会创建一个

然后您就有了用于放置的

组件和一个全局API来调用调用方法

this.$snackbar.open（{someOptions:'.''''}）

例如：

在

/plugins/snackbar

中创建一个文件夹，并将以下内容放入：

/plugins/snackbar/index.js

import Vue from "vue";
import snackbar from "~/plugins/snackbar/snackbar";

Vue.use(snackbar);

这是供

numxt.config.js

全局加载的。这看起来像：

  ...
  /*
   ** Plugins to load before mounting the App
   ** Doc: https://nuxtjs.org/guide/plugins
   */
  plugins: ["~/plugins/snackbar/index.js"],
  ...

好的，现在创建

/plugins/snackbar/snackbar.js

import Vue from "vue";
import snackbar from "~/plugins/snackbar/snackbar";

Vue.use(snackbar);

这是一个保存组件状态并充当事件代理的插件

import snackbar from "~/plugins/snackbar/snackbar.vue";

const Plugin = {
  install(Vue, options = {}) {
    /**
     * Makes sure that plugin can be installed only once
     */
    if (this.installed) {
      return;
    }
    this.installed = true;

    /**
     * Create event bus
     */

    this.event = new Vue();

    /**
     * Plugin methods
     */
    Vue.prototype.$snackbar = {
      show(options = {}) {
        Plugin.event.$emit("show", options, true);
      }
    };

    /**
     * Registration of <snackbar/> component
     */
    Vue.component("snackbar", snackbar);
  }
};

export default Plugin;

---

上面的一个工作示例可以在这里找到

，奇迹发生了！谢谢你的回答，非常有用。它工作得很好，我学到了一些新的东西，很高兴它有帮助

this.$snackbar.show({
  text: "Hello, snackbar!",
  type: "success"
});