如何在独立的javascript文件中制作Bootstrap-vue Toast

Question

我学习vue.js已经有几天了，我想制作一个显示 Toast 的函数，阅读官方 bootstrap-vue 文档： https: //bootstrap-vue.org/docs/components/toast# toasts-on-demand，我能够通过组件实例注入和自定义组件制作 toast ，但是，我想通过独立的javascript 函数/文件制作另一个自定义 toast ，以便我可以动态调用它。这是我使用注入的Cart.vue代码：<script>export default {  methods: {    purchaseHandler() {      this.$bvToast.toast('The item added to your cart', {          title: 'Notification',          variant: 'succes',          solid: true        })    },  },};</script>但是，我制作了一个custom-toast.js作为独立的 js 函数/文件，并按照文档所述导入了插件：import Vue from 'vue'import { ToastPlugin } from 'bootstrap-vue'Vue.use(ToastPlugin)export default () => {    this.$bvToast.toast('Toast body content', {        title: 'Toast test',        variant: 'succes',        solid: true      })}我将custom-toast.js导入到了Cart.vue文件中，现在看起来是这样的：<script>import customToast from "./custom-toast";export default {  methods: {    purchaseHandler() {      customToast()  },};</script>现在出现错误：[Vue warn]：v-on 处理程序中出现错误：“TypeError：无法读取未定义的属性 '$bvToast'”类型错误：无法读取未定义的属性“$bvToast”我知道这是超级基本的东西，它认为我可以通过在独立的js文件中找到相当于this.$bvToast注入来解决它，但我找不到任何东西，因为我对Vue js的了解还很少，真正的问题独立 js 文件中的this.$bvToast或任何 bootstrap-vue 注入相当于什么？我该如何解决这个问题？谢谢。抱歉英语不好

Answer 1

你可以制作一个 mixin 文件，参见https://v2.vuejs.org/v2/guide/mixins.html。在脚本部分导入并声明 mixin 后，您可以调用 mixin 中的函数。