Qu'est-ce que vue.use ?

vue.use est une API officielle, qui est une méthode pour enregistrer globalement un composant ou un plug-in. Si le plug-in est un objet, la méthode d'installation doit être fournie si le plug-in l'est. une fonction, elle sera utilisée comme méthode d'installation. Cette méthode doit être appelée avant d'appeler "New Vue()".

L'environnement d'exploitation de ce tutoriel : Système Windows 7, Vue version 2.9.6 Cette méthode convient à toutes les marques d'ordinateurs.

Introduction officielle de l'API :

Vue.use(plugin)

Paramètres

Plugin {Object | function}

Utilisation

Installez le plugin 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.

Utilisation de Vue.use

Exemple Element-UI

Selon la documentation ElementUI , dans Dans le projet construit avec Vue cli, ElementUI

/*
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)
});

est utilisé de cette manière. Le code ci-dessus complète l'introduction d'Element. Il convient de noter que le fichier de style doit être introduit séparément.
Vous pouvez utiliser les éléments Element directement dans le composant mono-fichier de Vue plus tard en utilisant 44ca90894c9c5c4dffec4b93a1966d66abc819eb726d549244df5ee5de853a0c.
Alors que s’est-il passé exactement ?

1. Le premier commentaire importe ElementUI

import ElementUI from 'element-ui'

// TODO Comprendre comment importer le module

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;

};

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

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!