Mari kita bincangkan tentang lokasi storan dan penggunaan komponen awam global uniapp

Dalam proses menggunakan uniapp untuk pembangunan bahagian hadapan, kami selalunya perlu menggunakan komponen awam, seperti bar navigasi tersuai, bar navigasi bawah, tetingkap timbul, dsb. Jadi, di manakah komponen awam global ini harus diletakkan? Artikel ini akan memperkenalkan anda kepada lokasi storan dan penggunaan komponen awam global uniapp.

1. Lokasi storan komponen awam global uniapp

Dalam uniapp, kami boleh menggunakan semula komponen yang sama pada halaman yang berbeza dengan mencipta komponen awam. Komponen ini boleh dibahagikan kepada komponen awam global dan komponen awam tempatan.

Komponen awam global merujuk kepada komponen yang boleh digunakan sepanjang projek, seperti bar navigasi tersuai, bar navigasi bawah, tetingkap timbul, dsb. Komponen awam tempatan merujuk kepada komponen yang hanya digunakan dalam satu halaman.

Jadi, di manakah komponen awam global harus diletakkan? Komponen awam dalam uniapp boleh disimpan di dua lokasi berikut:

1. /komponen/ direktori

Dalam direktori akar projek uniapp, anda boleh melihat fail bernama folder komponen, folder ini adalah tempat komponen awam global diletakkan. Berbilang subfolder boleh dibuat di bawah folder ini, setiap subfolder menyimpan komponen biasa. Pendekatan ini membolehkan komponen awam global diakses oleh keseluruhan projek.

2. /pages/ direktori

Komponen awam global juga boleh diletakkan dalam direktori /pages/. Kaedah ini menganggap komponen sebagai halaman dan menggunakan komponen dengan merujuk halaman di halaman lain.

2. Cara menggunakan komponen awam global uniapp

Selepas menyimpan lokasi komponen awam global, kami boleh menggunakan komponen ini dalam mana-mana halaman.

Terdapat dua cara untuk menggunakan komponen global:

1. Gunakan kaedah Vue.use() untuk mendaftar secara global

Gunakan Vue.use( ), Kami boleh mendaftarkan komponen awam global dalam mana-mana komponen vue.

Sebagai contoh, dalam main.js kita boleh mendaftar seperti ini:

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

Kemudian kita boleh menggunakan komponen seperti ini dalam mana-mana halaman:

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

2. Rujukan terus dalam halaman

Kami juga boleh merujuk terus komponen awam global dalam komponen halaman.

Sebagai contoh, apabila kita ingin menggunakan komponen awam global bernama MyDialog, kita perlu membuat import berikut dalam halaman:

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

Kemudian dalam komponen halaman, kita Anda boleh menggunakan komponen awam global seperti komponen biasa:

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

Perlu diingat bahawa apabila menggunakan kaedah ini, kita perlu merujuknya dalam setiap halaman yang perlu menggunakan komponen tersebut.

Ringkasan

Dalam uniapp, terdapat dua lokasi storan untuk komponen awam global: direktori /components/ dan direktori /pages/. Antaranya, direktori /components/ ialah lokasi storan biasa, yang boleh memudahkan panggilan global komponen. Dalam direktori /pages/, komponen dianggap sebagai halaman, dan komponen digunakan dalam halaman lain dengan merujuk halaman.

Tidak kira kaedah storan yang digunakan, kita boleh menggunakan komponen awam global melalui kaedah Vue.use() atau dengan merujuknya terus dalam komponen tersebut. Menggunakan komponen awam global boleh meningkatkan kadar penggunaan semula kod dan membantu kami menyelesaikan tugas dengan lebih cekap dan cepat semasa pembangunan.

Atas ialah kandungan terperinci Mari kita bincangkan tentang lokasi storan dan penggunaan komponen awam global uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!