Wie verwende ich ein Vue.js-Plugin in einer benutzerdefinierten Komponente?

Sie haben zwei Möglichkeiten, eine Komponente eines Drittanbieters für Ihre benutzerdefinierte Vue-Komponente verfügbar zu machen:

1. Importieren (ES6) und lokal verwenden

Fügen Sie im Skriptblock Ihrer Komponente Folgendes hinzu:

import { ServerTable, ClientTable, Event } from 'vue-tables-2'

Fügen Sie in Ihrer Komponenten-VM dies der Eigenschaft components hinzu:

export default { 
  data () { 
    return { /* data properties here */ }
  }, 
  components: {
    ServerTable, ClientTable, Event
  }
}

Sie können jetzt <v-server-table>, <v-client-table> usw. in Ihrer Komponentenvorlage verwenden.

2. Importieren Sie (ES6) global in Ihren Anwendungseinstiegspunkt:

import { ServerTable, ClientTable, Event } from 'vue-tables-2'

Machen Sie dann die Teile von vue-tables-2, die Ihre Anwendung wiederholt benötigt, für Ihre Vue-Hauptdatei und alle untergeordneten Komponenten verfügbar:

Vue.use(ClientTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [template = 'default']);

Oder und:

Vue.use(ServerTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [template = 'default']);

Dies ist auch auf der Github-Seite vue-tables-2-Dokumentation zu finden. 

Hinweis: Wenn Sie in Ihrer Vue-Anwendung kein Build-System wie Webpack verwenden, gibt es eine dritte Möglichkeit:

3. Machen Sie global verfügbar, wenn Sie kein Webpack oder ähnliches verwenden

Fügen Sie dies in Ihren HTML-Code ein, bevor Sie Ihr Anwendungsskript hinzufügen:

<script src="/path/to/vue-tables-2.min.js"></script>

Dadurch wird ein globales VueTables-Objekt verfügbar gemacht, sodass Sie dies in Ihrem Anwendungseinstiegspunkt können 

Vue.use(VueTables.ClientTable);

Wenn Sie die globale Methode verwenden, müssen Sie diese Drittanbieter-Komponenten nicht im components-Objekt Ihrer benutzerdefinierten Komponente deklarieren.

Warum sollte ich eine der beiden Methoden wählen?

Der globale Import hat den Vorteil, dass Sie weniger Code schreiben müssen und dem DRY -Prinzip folgen (wiederholen Sie sich nicht). Das macht also Sinn, wenn Ihre gesamte Anwendung an vielen Stellen die Plugin/Drittanbieter-Vue-Komponente benötigt.

Es hat jedoch die Option downside , durch die Ihre benutzerdefinierten Komponenten in verschiedenen Anwendungen/Projekten schwieriger wiederverwendbar werden, da sie keine eigenen Abhängigkeiten mehr angeben. 

Wenn Ihre eigenen benutzerdefinierten Komponenten aus irgendeinem Grund zu einem bestimmten Zeitpunkt aus Ihrer Anwendung entfernt werden, enthält die Anwendung weiterhin das vue-tables-2-Paket, das möglicherweise nicht mehr benötigt wird. In diesem Szenario wird Ihre Paketgröße nutzlos erhöht.