Question

我觉得有点像我错过了一些非常简单的东西，但我一直在尝试不同的东西并在整个地方搜索，并且无法弄清楚如何使用我的Vue应用程序中的自定义插件。

在＆＃39; vuePlugin.js＆＃39;我有类似的东西：

const myPlugin = {};
myPlugin.install = function(Vue, options){
    Vue.myMethod = function(){
        console.log("It worked!");
    }
}

在我的main.js中，我有：

import myPlugin from './js/vuePlugin.js'
Vue.use(myPlugin);

然后在我的App.vue中我有：

export default {
    name: 'app',
    props: {},
    data () {
        return{ someData: 'data' }
    },
    beforeCreate: function(){
        myMethod();
    }
}

有了这个，我得到一个错误，＆＃34; myMethod没有定义＆＃34;。

我试过说：

var foo = myPlugin();
console.log(foo);

在我的控制台中，我得到了一个名为＆＃34; install＆＃34;带参数：＆＃34;异常：TypeError：＆＃39;来电者＆＃39;和＆＃39;论证＆＃39;是受限制的函数属性，在此上下文中无法访问。在Function.remoteFunction＆＃34;

所有文档似乎只是展示如何创建插件和＆＃34;使用＆＃34;它，但实际上并不是如何访问其中的任何内容。我在这里缺少什么？

Answer 1

您必须导出要在vuejs中使用的对象，如下所示

<强> file vuePlugin.js

const myPlugin = {}
myPlugin.install = function (Vue, options) {
  Vue.myMethod = function () {
    console.log('It worked!')
  }
  Vue.prototype.mySecondMethod = function () {
     console.log('My second Method ')
  }
}
export default myPlugin

在调用方法时，您无法直接调用该方法，您必须使用如下所示的代码

<强> file App.vue

export default {
    name: 'app',
    props: {},
    data () {
        return{ someData: 'data' }
    },
    beforeCreate: function(){
        Vue.myMethod(); // call from Vue object , do not directly  call myMethod() 
        this.mySecondMethod() // if you used prototype based method creation in your plugin 
    }
}

希望它会帮助你

Vue创建插件

1 个答案: