Vue Erstellen eines Plugins

Question

Ich fühle mich ein bisschen wie ich etwas sehr einfach vermisse, aber ich habe verschiedene Sachen ausprobiert und suchen überall und kann nicht herausfinden, wie man eine Methode von einem benutzerdefinierten Plugin verwenden in meiner Vue-Anwendung.

In 'vuePlugin.js' Ich habe so etwas wie:

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

In meinem main.js ich habe:

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

Da ist in meinem App.vue ich habe:

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

Damit bekomme ich einen Fehler, dass "myMethod ist nicht definiert".

Ich habe zu sagen versucht:

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

In meiner Konsole bekomme ich ein Objekt namens „install“ mit Argumenten: „Ausnahme: Typeerror:‚Anrufer‘und‚Argumente‘eingeschränkten Eigenschaften Funktion und können nicht In diesem Zusammenhang wird auf "Function.remoteFunction" zugegriffen. "

Die gesamte Dokumentation scheint nur zu zeigen, wie man das Plugin erstellt und" benutzt ", aber nicht wirklich, wie man darauf zugreifen kann. Was fehlt mir hier?

Answer 1

Sie haben Ihr Objekt exportieren in NodeJS verwendet werden wie folgt

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 

während Aufruf der Methode Sie die Methode nicht direkt aufrufen können, müssen Sie verwenden Sie folgenden Code gezeigt

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 
    } 
} 

hofft, dass Sie