javascript / intermediate
Snippet
Entwicklung eines Vue-Plugins mit globalen Methoden
Plugins sind eigenständiger Code, der Vue Funktionen auf App-Ebene hinzufügt. Mithilfe der 'install'-Methode können Sie globale Eigenschaften oder Direktiven hinzufügen oder Abhängigkeiten bereitstellen, die in der gesamten Anwendung über die Composition API zugänglich sind.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// myPlugin.jsexport default {install: (app, options) => {app.config.globalProperties.$translate = (key) => {return key.split('.').reduce((o, i) => o[i], options.messages);};app.provide('i18n', options);}};// main.jsimport myPlugin from './myPlugin';app.use(myPlugin, { messages: { greeting: 'Hello' } });
vue
Erklärung
1
install: (app, options) => {
Der obligatorische Einstiegspunkt für jedes Vue-Plugin.
2
app.config.globalProperties
Fügt eine Eigenschaft hinzu, die in jeder Komponenteninstanz über 'this' zugänglich ist.
3
app.provide('i18n', options);
Stellt Daten für die Injektion in jede untergeordnete Komponente bereit.