Buat komponen bilah yang boleh diguna semula di Laravel. Anda boleh menggunakan 1. Gunakan perintah artisan untuk menentukan komponen; 2. Parameter lulus untuk melaksanakan data dinamik; 3. Gunakan slot untuk mengawal struktur kandungan secara fleksibel; 4. Pengurusan Unified Gaya Komponen. Khususnya, gunakan PHP Artisan Buat: Komponen untuk menghasilkan fail komponen dan menulis struktur HTML dalam fail bilah; lulus nilai dinamik melalui atribut kelas komponen atau pemindahan parameter langsung; Gunakan slot lalai $ slot dan slot bernama untuk menyokong penyisipan kandungan pelbagai wilayah; Tulis gaya terpusat di dalam komponen atau beralih parameter secara dinamik untuk meningkatkan kecekapan penyelenggaraan kod dan pembangunan.

Mewujudkan komponen bilah yang boleh diguna semula di Laravel sebenarnya agak mudah. Kuncinya adalah untuk abstrak struktur dan logik HTML yang digunakan semula supaya mereka dapat dengan mudah dipanggil beberapa halaman. Bilah sendiri menyediakan fungsi komponen dan slot. Penggunaan rasional ciri -ciri ini dapat meningkatkan kecekapan pembangunan dan penyelenggaraan kod.

Berikut adalah beberapa senario biasa untuk bercakap tentang cara membuat dan menggunakan komponen bilah dengan lebih baik.

Bagaimana untuk menentukan komponen bilah asas?

Laravel menyediakan alat baris arahan untuk menghasilkan komponen bilah dengan cepat:

 PHP Artisan Make: Butang Komponen

Ini akan menghasilkan fail button.blade.php dalam direktori resources/views/components , dan membuat fail kelas yang sepadan dalam app/View/Components .

Dalam fail bilah, anda boleh menulis HTML seperti menulis pandangan biasa, sebagai contoh:

 <!-Sumber/pandangan/komponen/butang.blade.php->
<butang jenis = "hantar" class = "bg-blue-500 teks-putih px-4 py-2 bulat">
    {{$ slot}}
</butang>

Kemudian gunakannya seperti ini dalam pandangan lain:

 <x- Button> Hantar </x-button>

Kaedah ini sesuai untuk elemen UI umum seperti butang, kad, elemen bentuk, dll.

Bagaimana untuk lulus parameter ke komponen bilah?

Banyak kali komponen memerlukan data dinamik, seperti warna butang, alamat pautan, dan lain -lain. Pada masa ini, anda boleh menentukan atribut awam dalam kelas komponen, atau lulus parameter secara langsung melalui atribut.

Contohnya:

 PHP Artisan Make: Komponen Alert --View = Components.Alert

Tentukan atribut dalam kelas komponen:

 // app/paparan/komponen/alert.php
Fungsi Awam __Construct (rentetan awam $ type = 'info')
{
}

Gunakan dalam templat bilah:

 <!-Sumber/pandangan/komponen/alert.blade.php->
<div class = "Alert Alert-{{$ type}}">
    {{$ slot}}
</div>

Cara menggunakannya adalah seperti berikut:

 <x-alert type = "Danger"> Ini adalah peringatan berbahaya </x-alert>

Kaedah pemindahan parameter ini sangat sesuai untuk memaparkan komponen gaya yang berbeza mengikut status yang berbeza, seperti kotak prompt, label, ikon, dll.

Slot fleksibel

Komponen bilah menyokong slot lalai dan slot yang dinamakan, yang membolehkan anda lebih banyak mengawal struktur kandungan.

Slot lalai adalah $slot dalam contoh di atas, manakala slot bernama boleh ditentukan melalui Arahan @slot atau :slotName .

Sebagai contoh, komponen kad mungkin mengandungi tajuk dan badan:

 <!-Sumber/pandangan/komponen/card.blade.php->
<div class = "card">
    <div class = "card-header">
        {{$ title}}
    </div>
    <div class = "card-body">
        {{$ slot}}
    </div>
</div>

Semasa menggunakan:

 <x-card title = "Maklumat Pengguna">
    Ini adalah kandungan kad.
</x-card>

Jika anda ingin memasukkan beberapa kawasan lebih fleksibel, anda boleh menggunakan slot bernama:

 <!-Sumber/pandangan/komponen/card.blade.php->
<div class = "card">
    <div class = "card-header">
        {{$ header}}
    </div>
    <div class = "card-body">
        {{$ slot}}
    </div>
    <div class = "card-footer">
        {{$ footer ?? &#39;Lalai lalai&#39;}}
    </div>
</div>

Semasa menggunakan:

 <x-card>
    <x-slot name = "header"> Ini adalah header </x-slot>

    Ini adalah kandungan utama.

    <x-slot name = "footer"> Ini adalah bahagian bawah </x-slot>
</x-card>

Slot bernama sesuai untuk komponen dengan struktur kompleks, seperti kotak modal, bar navigasi, bekas susun atur, dll.

Bagaimana untuk menguruskan gaya komponen secara bersatu?

Jika anda menggunakan kerangka seperti CSS Tailwind atau Bootstrap, disyorkan untuk menumpukan gaya di dalam komponen dan bukannya menambah nama kelas secara manual pada setiap halaman.

Sebagai contoh, komponen butang:

 <!-Sumber/pandangan/komponen/butang.blade.php->
<butang jenis = "{{$ type}}" class = "bg-blue-500 hover: bg-blue-600 text-white font-bold py-2 px-4 bulat">
    {{$ slot}}
</butang>

Selepas pengubahsuaian ini, anda hanya perlu menukar gaya komponen sekali, dan semua tempat yang merujuk kepada komponen akan dikemas kini untuk mengelakkan masalah gaya yang tidak konsisten.

Di samping itu, anda juga boleh menukar gaya secara dinamik melalui parameter:

 <x-butang color = "merah"> Padam </x-button>

Kemudian laraskan kelas dalam komponen mengikut parameter color .

Pada dasarnya itu sahaja. Walaupun komponen bilah mudah, ia boleh menjadikan struktur templat lebih jelas, mengurangkan kod pendua, dan lebih mudah untuk dikekalkan jika digunakan dengan betul. Kuncinya adalah untuk mengenal pasti bahagian-bahagian mana yang multiplexed frekuensi tinggi, dan kemudian membungkusnya dalam kombinasi dengan parameter dan slot.

Atas ialah kandungan terperinci Mewujudkan komponen bilah yang boleh diguna semula di Laravel?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!