web-dev-qa-db-fra.com

Comment utiliser un plugin Vue.js dans un composant personnalisé?

J'ai besoin de sortir un tableau et son contenu qui peut être mis à jour via Ajax. Je prévois donc d’utiliser vue-tables-2 ( https://github.com/matfish2/vue-tables-2 ) qui est un plugin Vue.js.

En utilisant la méthode Laravel, j'écris un composant personnalisé Vue.js. Comment utiliser le plugin vue-tables-2 dans mon composant?

Voici un exemple d'utilisation du plugin https://jsfiddle.net/matfish2/jfa5t4sm/ . Malheureusement, dans l'exemple, le plugin n'est pas intégré à un composant.

javascriptlaravelvuejs2vue-componentvue-tables-2
4
Luigi T.

Vous disposez de deux méthodes pour rendre un composant tiers disponible pour votre composant Vue personnalisé:

1. Importer (ES6) et utiliser localement

Dans le bloc de script de votre composant, mettez ceci en haut:

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

Dans la VM de votre composant, ajoutez ceci à la propriété components:

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

Vous pouvez maintenant utiliser les <v-server-table>, <v-client-table> etc. dans votre modèle de composant.

2. Importez (ES6) globalement dans le point d’entrée de votre application:

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

Puis rendez les parties de vue-tables-2 dont vous avez régulièrement besoin dans votre fichier Vue principal et tous les composants enfants:

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

Ou et:

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

Cela se trouve également sur la page GitHub de la documentation vue-tables-2 . 

Remarque: lorsque vous n'utilisez pas de système de compilation tel que webpack dans votre application Vue, il existe un troisième moyen:

3. Rendre disponible globalement lorsque vous n'utilisez pas webpack ou autres

Mettez ceci dans votre code HTML avant d'inclure votre script d'application:

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

Cela exposera un objet global VueTables afin que vous puissiez, dans le point d’entrée de votre application 

Vue.use(VueTables.ClientTable);

Si vous utilisez la méthode globale, il n'est pas nécessaire de déclarer ces composants tiers dans l'objet components de votre composant personnalisé.

Pourquoi devrais-je choisir l'une ou l'autre méthode plutôt que l'autre?

L'importation globale a l'avantage de vous obliger à écrire moins de code et à suivre le principe DRY (ne vous répétez pas). Cela a donc un sens si votre application entière à plusieurs points a besoin de ce composant Vue/plugin/tiers.

Cependant, il existe un inconvénient qui rend vos composants personnalisés plus difficiles à réutiliser sur plusieurs applications/projets car ils ne déclarent plus leurs propres dépendances. 

De plus, si vos propres composants personnalisés sont supprimés de votre application pour une raison quelconque, votre application inclura toujours le paquet vue-tables-2, qui risque de ne plus être nécessaire. Dans ce scénario, la taille de votre paquet augmentera inutilement.

8
connexo

Comment installer le plugin

Alors, suivez les instructions.

1
Pavel

Les composants ne sont enregistrés qu’une fois, globalement , en utilisant Vue.use dans le point d’entrée de votre projet (par exemple, main.js). Vous pouvez ensuite les utiliser dans tous les fichiers .vue descendants sans les importer.

0
Matanya