Vue.js
Plugins

CSS firebase HTML JavaScript jQuery Laravel Node.js PHP twitter-bootstrap TypeScript
Recherche…


Introduction

Les plugins Vue ajoutent des fonctionnalités globales telles que des méthodes globales, des directives, des transitions, des filtres, des méthodes d'instance, des objets et injectent des options de composants en utilisant des mixins.

Syntaxe

  • MyPlugin.install = function (Vue, options) {}

Paramètres

prénom La description
Vue Vue constructeur, injecté par Vue
options Options supplémentaires si nécessaire

Remarques

Dans la plupart des cas, vous devrez explicitement demander à Vue d'utiliser un plugin 

// calls `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

Pour passer des options 

Vue.use(MyPlugin, { someOption: true })

Enregistreur simple

//myLogger.js
export default {

  install(Vue, options) {
     function log(type, title, text) {
       console.log(`[${type}] ${title} - ${text}`);
     }

     Vue.prototype.$log = {
       error(title, text) { log('danger', title, text) },
       success(title, text) { log('success', title, text) },
       log
     }
  }
}

Avant que votre instance principale de Vue dise d’enregistrer votre plugin 

//main.js
import Logger from './path/to/myLogger';

Vue.use(Logger);

var vm = new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

Maintenant, vous pouvez appeler this.$log sur n'importe quel composant enfant 

//myComponent.vue
export default {
  data() {
    return {};
  },
  methods: {
    Save() {
      this.$log.success('Transaction saved!');
    }
  }
}


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow