Comment enregistrer le composant global de Vue avec utilisation

Cette fois, je vais vous montrer comment enregistrer les composants globaux de Vue avec utilisation, et quelles sont les précautions pour enregistrer les composants globaux de Vue avec utilisation. Voici un cas pratique, jetons un coup d'oeil.

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 la documentation officielle 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, utilisez donc Vue.use() pour ". Install" Les composants globaux apparaissent plus clairs.

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 les composants .js.

Prenons le composant eg comme exemple :

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 est d'utiliser Vue.directive (), l'emplacement est également sous le fichier d'instance racine, donc voici le problème s'il y a plusieurs instructions globales, couplées à 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);

Ceci enregistre la directive globale.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser le cross-domain et le rendu de vue2.0axios

Comment supprimer tous les caractères en double avec JS

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!