Parlez de l'emplacement de stockage et de l'utilisation des composants publics mondiaux d'Uniapp

Dans le processus d'utilisation d'uniapp pour le développement front-end, nous devons souvent utiliser des composants publics, tels que des barres de navigation personnalisées, des barres de navigation inférieures, des fenêtres contextuelles, etc. Alors, où devraient être placés ces composants publics mondiaux ? Cet article vous présentera l'emplacement de stockage et l'utilisation des composants publics globaux d'Uniapp.

1. L'emplacement de stockage des composants publics globaux d'uniapp

Dans uniapp, nous pouvons atteindre l'objectif de réutiliser le même composant pour différentes pages en créant des composants publics. Ces composants peuvent être divisés en composants publics mondiaux et composants publics locaux.

Les composants publics globaux font référence aux composants qui peuvent être utilisés tout au long du projet, tels que les barres de navigation personnalisées, les barres de navigation inférieures, les fenêtres contextuelles, etc. Les composants publics locaux font référence à des composants qui ne sont utilisés que dans une seule page.

Alors, où faut-il placer les composantes publiques mondiales ? Les composants publics dans uniapp peuvent être stockés dans les deux emplacements suivants :

1. /components/ répertoire

Dans le répertoire racine du projet uniapp, vous pouvez voir un dossier nommé composants, où sont placés les composants publics globaux. emplacement du composant. Plusieurs sous-dossiers peuvent être créés sous ce dossier, chaque sous-dossier stocke un composant commun. Cette approche permet aux composants publics mondiaux d'être accessibles à l'ensemble du projet.

2. /pages/ répertoire

Les composants publics globaux peuvent également être placés dans le répertoire /pages/. Cette méthode traite le composant comme une page et utilise le composant en référençant la page dans d'autres pages.

2. Comment utiliser les composants publics globaux d'uniapp

Après avoir stocké l'emplacement des composants publics globaux, nous pouvons utiliser ces composants dans n'importe quelle page.

Il existe deux façons d'utiliser les composants globaux :

1. Utilisez la méthode Vue.use() pour vous enregistrer globalement

Avec la méthode Vue.use(), nous pouvons enregistrer des composants publics globaux dans n'importe quel composant vue.

Par exemple, dans main.js on peut s'inscrire comme ceci :

import BackTop from '@/components/BackTop.vue'
Vue.use(BackTop)

Ensuite on peut utiliser le composant comme ceci dans n'importe quelle page :

<template>
  <div>
    <back-top></back-top>
  </div>
</template>

2. Référence directement dans la page

On peut aussi le référencer directement dans le page Les composants publics globaux sont référencés dans le composant.

Par exemple, lorsque l'on veut utiliser un composant public global nommé MyDialog, il faut faire l'import suivant dans la page :

import MyDialog from '@/components/MyDialog.vue'

Ensuite dans les composants de la page, on peut utiliser le composant public global comme un composant normal :

<template>
  <div>
    <my-dialog></my-dialog>
  </div>
</template>

Il est à noter que lors de l'utilisation de cette méthode, nous devons la référencer dans chaque page qui doit utiliser le composant.

Résumé

Dans uniapp, il existe deux emplacements de stockage pour les composants publics globaux : le répertoire /components/ et le répertoire /pages/. Parmi eux, le répertoire /components/ est un emplacement de stockage commun, ce qui peut faciliter l'appel global des composants. Dans le répertoire /pages/, le composant est considéré comme une page et le composant est utilisé dans d'autres pages en référençant la page.

Quelle que soit la méthode de stockage utilisée, nous pouvons utiliser des composants publics globaux via la méthode Vue.use() ou en les référençant directement dans le composant. L'utilisation de composants publics mondiaux peut améliorer considérablement le taux de réutilisation du code et nous aider à accomplir les tâches plus efficacement et plus rapidement pendant le développement.

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!