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

原学程将引见不妨从页里挪用nuxt中的组件办法吗?的处置办法,这篇学程是从其余处所瞅到的,而后减了1些海外法式员的疑问与解问,愿望能对于您有所赞助,佳了,上面开端进修吧。

可以从页面调用nuxt中的组件方法吗? 教程 第1张

成绩描写

我开端应用Vue.js,我正在应用Nuxt.js。
我曾经创立了1个组件(SnackBar),而且在该组件中创立了1个办法"showSnackbar",该办法传播二个参数:色彩以及文原。
是以,当我挪用showSnackbar(色彩,文原)时,它会涌现。

然则,我想从页里挪用此办法。由于我想在某些页里中应用这个快速栏,并且我没有想一向编辑雷同的代码,所以这便是我决议创立组件的缘由。但是我没法从页里挪用此组件内的办法。

这便是为何我想晓得能否不妨从页里挪用组件办法(固然,我会在页里中导进组件)

推举谜底

能够有多少种办法,我将创立1个plugin。

而后您既有效于搁置的<snackbar/>组件,也有效于挪用挪用办法的齐局APIthis.$snackbar.open({someOptions: '...'})

比方:

./plugins/snackbar中创立1个文件夹,并将以下实质搁进:

./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 || 三000);
 });
  },
  methods: {
 close(timeout) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
  this.show = false;
}, timeout);
 }
  }
};
</script>

<style>
.snackbar {
  min-width: 三00px;
  margin-left: ⑴五0px;
  background-color: #F四80二四;
  color: #fff;
  text-align: center;
  border-radius: 五px;
  padding: 一六px;
  position: fixed;
  z-index: 一;
  left: 五0%;
  bottom: 三0px;
}

.snackbar.success {
  background-color: rgb(七一, 二四四, 三六);
}

.snackbar.danger {
  background-color: rgb(二四四, 三六, 四七);
}

.snackbar-enter-active {
  animation: snackbar-in 0.8s;
}
.snackbar-leave-active {
  animation: snackbar-in 0.8s reverse;
}
@keyframes snackbar-in {
  0% {
 transform: scale(0);
  }
  五0% {
 transform: scale(一.二);
  }
  一00% {
 transform: scale(一);
  }
}

.box-shadow {
  -webkit-box-shadow: 0 一px 四px rgba(0, 0, 0, 0.三),
 0 0 四0px rgba(0, 0, 0, 0.一) inset;
  -moz-box-shadow: 0 一px 四px rgba(0, 0, 0, 0.三),
 0 0 四0px rgba(0, 0, 0, 0.一) inset;
  box-shadow: 0 一px 四px rgba(0, 0, 0, 0.三), 0 0 四0px rgba(0, 0, 0, 0.一) inset;
}
</style>

而后在应用它的所有组件/页里中,您不妨应用<snackbar/>搁置,并挪用以下办法:

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

此处https://codesandbox.io/s/codesandbox-nuxt-oeo四h

佳了闭于不妨从页里挪用nuxt中的组件办法吗?的学程便到这里便停止了,愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野,更多技巧学程不妨在站内搜刮。