web-dev-qa-db-fra.com

Composant sans gabarit

J'ai un peu de code qui fait un appel api à un serveur et renvoie du JSON.

Il existait en tant que méthode dans mon composant, mais comme il devient un peu long, je veux l'extraire dans son propre fichier

En vuejs quelle est la meilleure pratique ici.

  • devrait-il s'agir d'un composant sans modèle? Comment cela fonctionnerait-il?

  • vais-je créer un module es6?

modulevuejs2componentsstructure
15
LeBlaireau

Je suggérerais d'utiliser un mixin ici.

Dans un fichier comme myCoolMixin.js définissez votre mixin ...

export default {
   methods: {
      myAwesomMethod() {
         //do something cool...
      }
   }
}

Vous pouvez définir n'importe quoi dans un mixin comme un composant. par exemple. objet de données, propriétés calculées ou surveillées, etc. Ensuite, vous incluez simplement le mixin dans votre composant.

import myCoolMixin from '../path/to/myCoolMixin.js'

export default {
   mixins: [myCoolMixin],
   data: function() {
      return: {
         //... 
      }
    },
    mounted: function() {
       this.myAwesomeMethod(); // Use your method like this!  
    }
 }

Plus d'informations sur Mixins ici: https://vuejs.org/v2/guide/mixins.html

11
skribe

Les mixins fonctionnent, ou vous pouvez créer un plugin. Voici l'exemple de documents:

MyPlugin.install = function (Vue, options) {
  // 1. add global method or property
  Vue.myGlobalMethod = function () {
    // something logic ...
  }

  // 2. add a global asset
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // something logic ...
    }
    ...
  })

  // 3. inject some component options
  Vue.mixin({
    created: function () {
      // something logic ...
    }
    ...
  })

  // 4. add an instance method
  Vue.prototype.$myMethod = function (methodOptions) {
    // something logic ...
  }
}

Plugins Vue

1
DigitalDrifter