slot nuxt

Dengan menggunakan slot, FancyButton kami lebih fleksibel dan dapat digunakan ulang. Kami sekarang dapat menggunakannya di tempat yang berbeda dengan konten dalam yang berbeda, tetapi semuanya dengan gaya Fancy yang sama. Mekanisme slot dari komponen Vue terinspirasi dari elemen slot Web Component asli, tetapi dengan kemampuan tambahan yang akan kita lihat nanti. Oleh karena itu, nuxt-page digunakan ketika Anda ingin menampilkan halaman dalam aplikasi Anda (menggantikan nuxt dan nuxt-child /), sedangkan slot digunakan dalam layout (seperti komponen lain yang menggunakan tag slot). Secara sederhana, slot digunakan untuk melewati elemen HTML dan konten lainnya dari induk ke komponen anaknya untuk dirender. Untuk artikel ini, kami akan menggunakan kerangka kerja Vue.js, Nuxt.js. Kami akan menjelajahi slot Nuxt.js, bagaimana menggunakannya, dan bagaimana mereka bekerja. Daftar isi 1. Cara menggunakan slot Nuxt.js (slot default) 2. Nuxt menyediakan kerangka kerja layout untuk mengekstrak pola UI umum menjadi layout yang dapat digunakan kembali. Untuk kinerja terbaik, komponen yang ditempatkan di direktori ini akan dimuat secara otomatis melalui impor asinkron ketika digunakan. Aktifkan Layout Layout diaktifkan dengan menambahkan NuxtLayout ke app.vue Anda: Dokumentasi app.vue. Playground. Template. Editor. Rilis. Buat proyek baru Nuxt, modul, lapisan, atau mulai dari tema dengan koleksi starter kami. Cara tercepat untuk melakukan kueri konten Anda dengan komponen. Komponen ContentList mengambil daftar dokumen dan memungkinkan Anda merendernya dengan menggunakan slot. Jalur pengambilan default ke akar konten (/). Jalur eksplisit dapat diberikan ke komponen. halaman index.vue. Di Nuxt 2, komponen Nuxt digunakan dalam layout untuk merender halaman saat ini. Di Nuxt 3, layout menggunakan slot sebagai gantinya, sehingga Anda harus mengganti komponen tersebut dengan slot /. Ini juga memungkinkan penggunaan kasus lanjutan dengan slot bernama dan berlingkup. Pelajari lebih lanjut tentang layout. Isi Slot. Vue mengimplementasikan API distribusi konten yang terinspirasi oleh draf spesifikasi Web Components, menggunakan elemen slot untuk berfungsi sebagai outlet distribusi konten. Kemudian dalam template untuk navigation-link, Anda mungkin memiliki: Ketika komponen merender, slot slot akan diganti dengan "Profil Anda". Slot dapat berisi template apa pun ... Komponen Nuxt. Komponen Nuxt adalah komponen yang Anda gunakan untuk menampilkan komponen halaman Anda. Pada dasarnya, komponen ini digantikan oleh apa yang ada di dalam komponen halaman Anda tergantung pada halaman yang ditampilkan. Oleh karena itu penting bagi Anda untuk menambahkan komponen Nuxt ke layout Anda. layout default.vue. Routing sistem file Nuxt menciptakan rute untuk setiap file di direktori halaman . Salah satu fitur inti dari Nuxt adalah router sistem file. Setiap file Vue di dalam direktori halaman membuat URL (atau rute) yang sesuai yang menampilkan konten file tersebut. Dengan menggunakan impor dinamis untuk setiap halaman, Nuxt memanfaatkan pemisahan kode untuk mengirimkan ... Anda ingin layout di mana Anda dapat memodifikasi lebih dari satu item pada layout. Anda dapat melakukannya dengan memberi nama pada slot dan menggunakan nama yang tepat untuk memberi tahu Nuxt3 kode mana yang merupakan bagian dari keseluruhan ... Komponen Nuxt. Komponen Nuxt adalah komponen yang Anda gunakan untuk menampilkan komponen halaman Anda. Pada dasarnya, komponen ini digantikan oleh apa yang ada di dalam komponen halaman Anda tergantung pada halaman yang ditampilkan. Oleh karena itu penting bagi Anda untuk menambahkan komponen Nuxt ke layout Anda. layout default.vue. Halo, akan sangat bagus jika area slot dapat diberi penugasan dalam file layout. Seringkali bagian dari halaman perlu dirender di dalam toolbar atas. Terima kasih. Pertanyaan ini tersedia di komunitas Nuxt.js (#c162)