Comment utiliser use pour enregistrer les composants globaux et les directives globales de Vue

Ci-dessous, je vais partager avec vous une méthode d'utilisation pour enregistrer les composants globaux et les instructions globales de Vue. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Les composants et instructions de Vue sont divisés en composants locaux, instructions locales et composants globaux et instructions globales. Lors de l'enregistrement d'un certain nombre d'instructions globales et de composants globaux, la méthode dans le document officiel semble un peu floue.

Composant global

Dans la documentation officielle de Vue, Vue.component(tagName, options) est utilisé pour créer un composant global. Cependant, cette méthode est écrite dans le même fichier que l'instance racine. Si vous souhaitez enregistrer plusieurs composants globaux en même temps, cela rendra le fichier d'instance racine trop lourd. Il est donc plus pratique d'utiliser Vue.use(. ) pour "installer" des composants globaux.

Méthode :

1. Créer un nouveau dossier plugins

2. Créer un composant global dans le dossier Composants de fichiers. .js

3. Introduisez tous les composants globaux à enregistrer dans le fichier Components.js

4 Dans le fichier d'instance racine app.js, introduisez Components.js

. Prenons l'exemple du composant eg :

components.js:

import eg from '../components/eg.vue';
export default (Vue)=>{
 Vue.component("Eg",eg);
}

app.js:

import components from './plugins/components.js';
Vue.use(components);

Après l'écriture ci-dessus, le composant global Eg est enregistré.

Lorsque plusieurs composants globaux doivent être enregistrés, il est plus rafraîchissant d'utiliser cette méthode !

Directives globales

Pour l'enregistrement des directives globales, la méthode donnée dans la documentation officielle consiste à utiliser Vue.directive(), et l'emplacement est également sous le fichier d'instance racine, le problème se pose s'il existe plusieurs instructions globales et plusieurs composants globaux, le fichier app.js deviendra extrêmement volumineux.

Par conséquent, similaire à la méthode ci-dessus d'enregistrement des composants globaux, Vue.use() est également utilisée pour "installer" des instructions globales.

Méthode :

1. Créer un nouveau dossier plugins

2. Créer un composant global dans le dossier Directives de fichiers. .js

3. Introduisez toutes les directives globales à enregistrer dans le fichier directives.js

4 Dans le fichier d'instance racine app.js, introduisez directives.js

. Prenons l'exemple de la directive v-focus :

directives.js:

export default (Vue)=>{
 Vue.directive("focus",{
  inserted:function(el){
   el.focus();
  }
 })
}

app.js

import directives from "./plugins/directives.js"
Vue.use(directives);

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 :

jQuery+ajax lit les données json et tri par exemple de prix

vue de contrôle des données, analyse du code source

Exemple de code pour développer un composant bouton avec vue

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!