愿所有的美好和期待都能如约而至

可以从页面调用nuxt中的组件方法吗?

发布时间:  来源:互联网  作者:匿名  标签:error Is it possible to call a component method in nuxt from a page? exception I  热度:37.5℃

本文介绍了可以从页面调用nuxt中的组件方法吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我开始使用Vue.js,我正在使用Nuxt.js。
我已经创建了一个组件(SnackBar),并且在该组件中创建了一个方法”showSnackbar”,该方法传递两个参数:颜色和文本。
因此,当我调用showSnackbar(颜色,文本)时,它会出现。

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

这就是为什么我想知道是否可以从页面调用组件方法(当然,我会在页面中导入组件)

推荐答案

可能有几种方法,我将创建一个plugin。

然后您既有用于放置的<snackbar/>组件,也有用于调用调用方法的全局APIthis.$snackbar.open({someOptions: '...'})

例如:

./plugins/snackbar中创建一个文件夹,并将以下内容放入:

./plugins/snackbar/index.js

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

Vue.use(snackbar);

这是针对nuxt.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 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;

现在…

./plugins/snackbar/snackbar.vue

魔术发生的地方…

<template>
  <div>
    <transition name="snackbar">
      <div v-if="show" :class="['snackbar', 'box-shadow', type]">
        <slot>{{ options.text }}</slot>
      </div>
    </transition>

    <pre>options: {{ options }}</pre>
    <pre>show: {{ show }}</pre>
    <pre>type: {{ type }}</pre>
  </div>
</template>

<script>
import snackbar from "~/plugins/snackbar/snackbar";

export default {
  data: () => ({
    options: {
      text: "",
      type: ""
    },
    show: false,
    type: "",
    timer: 0
  }),
  beforeMount() {
    snackbar.event.$on("show", options => {
      this.options = options;
      this.type = options.type;
      this.show = true;
      this.close(this.options.closeWait || 3000);
    });
  },
  methods: {
    close(timeout) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.show = false;
      }, timeout);
    }
  }
};
</script>

<style>
.snackbar {
  min-width: 300px;
  margin-left: -150px;
  background-color: #F48024;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
}

.snackbar.success {
  background-color: rgb(71, 244, 36);
}

.snackbar.danger {
  background-color: rgb(244, 36, 47);
}

.snackbar-enter-active {
  animation: snackbar-in 0.8s;
}
.snackbar-leave-active {
  animation: snackbar-in 0.8s reverse;
}
@keyframes snackbar-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.box-shadow {
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
</style>

然后在使用它的任何组件/页面中,您可以使用<snackbar/>放置,并调用如下方法:

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

此处https://codesandbox.io/s/codesandbox-nuxt-oeo4h

这篇关于可以从页面调用nuxt中的组件方法吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP