Comment utiliser la méthode vue.use

Utilisation de la méthode vue.use : Installez d'abord le plug-in Vue.js ; puis utilisez le plug-in via la méthode globale "Vue.use()", avec la syntaxe telle que "vue.use (plugin, arguments)".

L'environnement d'exploitation de ce tutoriel : système Windows7, version vue2.0, ordinateur thinkpad t480.

Recommandé : "tutoriel vue"

Introduction officielle de l'API :

Vue.use(plugin)

L'explication donnée par le site officiel est : via la méthode globale Vue. use() Utiliser des plugins.

vue.use（plugin, arguments）

Paramètres

{Object | function} plugin

Utilisation

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 fera office de méthode d'installation. Lorsque la méthode d'installation est appelée, Vue sera transmise en paramètre.

Cette méthode doit être appelée avant d'appeler New 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.

Exemple Element-UI

Selon le document ElementUI, utilisez ElementUI comme celui-ci dans un projet construit avec Vue cli

/*
mian.js
*/
import Vue from 'vue';
import ElementUI from 'element-ui'; // 1
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI); // 2
new Vue({
el: '#app',
render: h => h(App)
});

Le code ci-dessus complète l'introduction d'Element It. Il convient de noter que le fichier de style doit être importé séparément.

Plus tard, vous pourrez utiliser directement dans le composant monofichier de Vue pour utiliser l'élément Element.

Alors, que s'est-il passé ?

1. Le premier commentaire est importé dans ElementUI

import ElementUI from 'element-ui'
// TODO 理解如何导入模块

Ce qui suit est le contenu de src/index.js. Comme vous pouvez le voir, index.js exporte un objet dans l'instruction d'importation ci-dessus, cet objet reçoit le nom de variable ElementUI. Veuillez noter la fonction d'installation ici.

/*
index.js
*/export default {
  version: '2.11.1',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  ...
};

2. Le deuxième commentaire est d'installer ElementUI

Vue.use(ElementUI);

Nous avons observé que la méthode Vue.use est utilisée ici et que l'objet ElementUI est transmis. D'après la documentation Vue.use, vous pouvez voir que cela appelle la méthode d'installation de l'objet ElementUI et passe dans Vue.

// install函数
const install = function(Vue, opts = {}) {
 locale.use(opts.locale);
 locale.i18n(opts.i18n);
// 安装组件：通过Vue.component声明全局组件，所以我们能够直接使用而不需要声明
 components.forEach(component => {
   Vue.component(component.name, component);
 });
 Vue.use(InfiniteScroll);
 Vue.use(Loading.directive);
// 在Vue的原型链上做一些小动作所以所有的Vue实例都可以访问到这些生命的变量
// 变量名使用$开头表明这是公共API属性或者方法，这是一种约定。
 Vue.prototype.$ELEMENT = {
   size: opts.size || '',
   zIndex: opts.zIndex || 2000
 };
// ok，这里我们看到了许多用于提示的组件都设定在Vue原型链上，所以我们可以在Vue实例内部直接使用this.$alert
 Vue.prototype.$loading = Loading.service;
 Vue.prototype.$msgbox = MessageBox;
 Vue.prototype.$alert = MessageBox.alert;
 Vue.prototype.$confirm = MessageBox.confirm;
 Vue.prototype.$prompt = MessageBox.prompt;
 Vue.prototype.$notify = Notification;
 Vue.prototype.$message = Message;
};

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!