Comment utiliser le composant Vue.use() via la méthode globale

Cet article présente principalement le composant global personnalisé de vue et son utilisation via la méthode globale Vue.use(). Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Introduction<.>

Vue.use(plugin) : installez le plug-in Vue.js. Si le plugin est un objet, la méthode d'installation doit être fournie. Si le plugin est une fonction, il sera utilisé comme méthode d'installation. La méthode d'installation sera appelée en paramètre de Vue.

Lorsque la méthode d'installation est appelée plusieurs fois par le même plug-in, le plug-in ne sera installé qu'une seule fois.

Les plug-ins Vue.js doivent avoir une méthode d'installation publique. Le premier paramètre de cette méthode est le constructeur Vue, et le deuxième paramètre est un objet d'options facultatif :

MyPlugin.install = function (Vue, options) {
 // 1. 添加全局方法或属性
 Vue.myGlobalMethod = function () {
  // 逻辑...
 }
 // 2. 添加全局资源
 Vue.directive('my-directive', {
  bind (el, binding, vnode, oldVnode) {
   // 逻辑...
  }
  ...
 })
 // 3. 注入组件
 Vue.mixin({
  created: function () {
   // 逻辑...
  }
  ...
 })
 // 4. 添加实例方法
 Vue.prototype.$myMethod = function (methodOptions) {
  // 逻辑...
 }
}

Utilisez le plug-in via la méthode globale Vue.use() :

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

Vous pouvez également passer un objet options :

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

Vue.use empêchera automatiquement les enregistrements multiples du même plug-in, et le plug-in ne sera enregistré qu'une seule fois.

Certains plug-ins officiellement fournis par Vue.js (tels que vue-router) appelleront automatiquement Vue.use() lorsqu'ils détecteront que Vue est une variable globale accessible. Cependant, dans un environnement de module tel que CommonJS, vous devez toujours appeler explicitement Vue.use() :

// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了调用此方法
Vue.use(VueRouter)

Exemple : implémenter un composant enfant

dans How pour utiliser ce composant dans main.js :

import childModule from './components/children'
Vue.use(childModule)

La structure des répertoires du dossier du composant est la suivante :

|-components
　　|-children
　　　　|-index.js 导出组件，并且install
　　　　|-children.vue （定义自己的组件模板）

Le code children.vue est la suivante :

import childrencomponent from './children.vue'
const childrenMo = {
  install:function(Vue){
    Vue.component('childModule',childrencomponent)
  }
}
export default childrenMo

De cette façon, un composant global est appelé via vue.use.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter la communication interne des composants dans React

Comment implémenter la pagination dynamique des données dans jQuery

Il existe des opérations complexes sur MVC dans AngularJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!