Question

我想在我的应用程序中全局使用某些功能。
对于我的问题，大多数答案都与Vue Mixin有关。尽管我使用它，但是它不能解决我的问题。这是我的尝试

Vue.mixin({
    methods:{
        gFun(){
            console.log("Works");
        },
    }
})

const app = new Vue({
    el: '#app',
    data: {

    },
    created(){
        gFun();
    },
    methods: {

    }
});

Vue说“ ReferenceError：未定义testMixin”。
我想只是能够全局使用 gFun（）（而不要像 this.gFun（）那样使用）。请解释一下我的事情。
是否使用Vue Mixin是可以的。

Answer 1

一种解决方法是使用您建议的Vue mixins。解决该问题的另一种好方法是使用Plugin。

请注意我如何声明它们以及如何调用两个全局变量之间的区别，尤其是插件选项中的美元符号（$）。 this.gMixinFun()和this.$gPluginFun()都可以在Vue实例选项中作为全局方法使用。

Vue.config.productionTip = false;
Vue.config.devtools = false;


// OPTION 1: Using Mixin
Vue.mixin({
  methods: {
    gMixinFun: function() {
      return "this is a mixin test"
    }
  }
});

// OPTION 2: Using plugin
const plugin = {
  install() {
    Vue.gPluginFun = () => 'this is a plugin test' //Vue.gPluginFun()
    Vue.prototype.$gPluginFun = () => 'this is a plugin test' //this.$gPluginFun()
  }
}

Vue.use(plugin)

const app = new Vue({
  el: '#app',
  created() {
    console.log("Using mixins =>", this.gMixinFun());
    console.log("Using plugins =>", this.$gPluginFun()); //or you can use Vue.gPluginFun() without the dollar($) sign
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
</div>

Answer 2

这不是Vue的问题。

您可以使用以下方式在javascript中创建全局函数：

window.gFun = window.gFun || () => console.log("Works");

Answer 3

您可以将全局函数声明为function functon_name(parameters){...}，尝试将vue实例像参数一样传递，以便按如下所示在全局函数中访问其属性

Vue.config.devtools = false;
Vue.config.productionTip = false;

window.gFun = function(vm) {
  console.log(vm.message);
}


const app = new Vue({
  el: '#app',
  data: {
    message: "Hello !"
  },
  created() {
    gFun(this);
  },
  methods: {

  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">

</div>

如何在Vue.js中创建全局函数？

3 个答案: