Comment utiliser le composant Vue.use() via la méthode globale-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-21 19:08:56

original

2858 Les gens l'ont consulté

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(&#39;my-directive&#39;, {
  bind (el, binding, vnode, oldVnode) {
   // 逻辑...
  }
  ...
 })
 // 3. 注入组件
 Vue.mixin({
  created: function () {
   // 逻辑...
  }
  ...
 })
 // 4. 添加实例方法
 Vue.prototype.$myMethod = function (methodOptions) {
  // 逻辑...
 }
}

Copier après la connexion

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

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

Copier après la connexion

Vous pouvez également passer un objet options :

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

Copier après la connexion

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(&#39;vue&#39;)
var VueRouter = require(&#39;vue-router&#39;)
// 不要忘了调用此方法
Vue.use(VueRouter)

Copier après la connexion

Exemple : implémenter un composant enfant

dans How pour utiliser ce composant dans main.js :

import childModule from &#39;./components/children&#39;
Vue.use(childModule)

Copier après la connexion

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

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

Copier après la connexion

Le code children.vue est la suivante :

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

Copier après la connexion

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.