Cara menggunakan lalai eksport dan import di Vue

Lalai eksport digunakan untuk mengeksport komponen VUE dan membolehkan modul lain untuk mengakses. Import digunakan untuk mengimport komponen dari modul lain, yang boleh mengimport komponen tunggal atau berbilang.

export default dan import di Vue: Kombinasi komponen halus

Ramai pemula dikelirukan oleh export default dan import dalam komponen VUE, memikirkan bahawa mereka seperti sepasang kembar yang tidak dapat dibezakan dan sentiasa tidak dapat mengetahui siapa yang. Malah, kunci untuk memahami mereka terletak pada memahami idea modulariti komponen VUE. Mari kita bincangkan artikel ini secara mendalam supaya anda dapat memahami sepenuhnya.

Mari kita bincangkan kesimpulan pertama: export default digunakan untuk mengeksport komponen VUE, sementara import digunakan untuk mengimport komponen ini dan menggunakannya di tempat lain. Mudah? Tetapi ada banyak cara di sini.

Asas: modulariti dan komponen

Di Vue, kami menganjurkan pembangunan komponen, memisahkan halaman kompleks ke dalam komponen kecil dan boleh diguna semula. export default dan import adalah kunci untuk mencapai modularization komponen. Bayangkan jika semua kod ditimbun dalam satu fail tanpa mereka, ia akan menjadi bencana untuk mengekalkan!

export default : Eksport komponen

Tujuan pernyataan export default adalah untuk mengeksport komponen VUE supaya modul lain dapat mengaksesnya. Ia hanya membolehkan mengeksport satu komponen lalai. Lihat contoh:

 <code class="javascript">// MyComponent.vue export default { name: 'MyComponent', data() { return { message: 'Hello from MyComponent!' }; }, template: ` <div> <p>{{ message }}</p> </div> ` };</code>

Kod ini mentakrifkan komponen bernama MyComponent dan mengeksportnya menggunakan export default . Perhatikan bahawa hanya ada satu eksport di sini, iaitu ciri export default .

import : Kemasukan komponen

Tujuan penyata import adalah untuk mengimport komponen dari modul lain. Ia boleh mengimport komponen tunggal atau pelbagai komponen. Mari lihat bagaimana mengimport MyComponent yang ditakrifkan di atas:

 <code class="javascript">// App.vue import MyComponent from './MyComponent.vue'; export default { name: 'App', components: { MyComponent }, template: ` <div id="app"> <mycomponent></mycomponent> </div> ` };</code>

Di sini, kami import MyComponent from './MyComponent.vue' untuk mengimport komponen MyComponent dari fail MyComponent.vue . Kemudian, daftar komponen dalam pilihan components , dan akhirnya menjadikannya dengan <mycomponent></mycomponent> dalam templat. Bukankah sangat mudah?

Penggunaan lanjutan dan masalah yang berpotensi

Anda mungkin tertanya -tanya, bagaimana jika saya mempunyai banyak komponen untuk dieksport? Pada masa ini, anda boleh menggunakan penyata export dan bukannya export default . export membolehkan anda mengeksport pelbagai komponen yang dinamakan, tetapi memerlukan nama yang sepadan apabila mengimport. Ini akan menjadi lebih fleksibel dalam projek besar, tetapi juga menambah kerumitan pengurusan.

Kesilapan yang biasa adalah lupa untuk mendaftarkan komponen yang diimport dalam pilihan components . Jika anda lupa untuk mendaftar, Vue tidak akan mengenali komponen, mengakibatkan kegagalan membuat. Apabila menyahpepijat, periksa dua pilihan components anda untuk memastikan semua komponen yang diimport didaftarkan dengan betul.

Tambahan pula, ketepatan jalan adalah penting. Pastikan laluan dalam pernyataan import anda betul, jika tidak, kesilapan yang tidak dapat dijumpai oleh modul akan berlaku. Kedua -dua laluan relatif atau mutlak adalah OK, tetapi tetap konsisten.

Pengoptimuman Prestasi

Dalam projek besar, sejumlah besar import komponen boleh menjejaskan prestasi. Anda mungkin mempertimbangkan menggunakan teknik pemuatan atau kod segmentasi kod untuk mengoptimumkan kelajuan pemuatan. Teknik -teknik ini adalah di luar skop artikel ini, tetapi mereka patut diterokai selepas anda telah mempelajari Vue secara mendalam.

Ringkasnya, export default dan import adalah asas modulariti komponen VUE, dan memahami mereka adalah kunci untuk menulis aplikasi VUE berkualiti tinggi. Ingat, mereka bekerjasama, export default bertanggungjawab untuk eksport, import bertanggungjawab untuk import, kedua -duanya sangat diperlukan. Berlatih lebih banyak dan berlatih lebih banyak dan anda boleh mengawalnya dengan mudah!

Atas ialah kandungan terperinci Cara menggunakan lalai eksport dan import di Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!