Beralih secara dinamik dari satu elemen html ke yang lain di Vue

Baru -baru ini seorang kawan bertanya kepada saya bagaimana untuk mengubah satu elemen HTML secara dinamik ke dalam blok templat Vue. Contohnya, mengikut syarat -syarat tertentu<div> Tukar elemen ke<code><p> elemen. Kuncinya ialah bagaimana untuk melakukan ini tanpa bergantung pada satu siri kod <code>v-if dan v-else . Pada mulanya saya tidak peduli kerana saya tidak dapat melihat alasan yang kuat untuk melakukannya; Ini tidak biasa. Walau bagaimanapun, pada hari yang sama, dia menghubungi saya sekali lagi dan memberitahu saya bahawa dia telah belajar bagaimana mengubah jenis elemen. Dia dengan gembira menegaskan bahawa Vue mempunyai komponen terbina dalam yang boleh digunakan sebagai elemen dinamik, hanya apa yang dia perlukan.

Ciri kecil ini menyimpan kod templat mudah dan kemas. Ia mengurangkan kod berlebihan v-if dan v-else , menjadikan kod lebih mudah difahami dan diselenggara. Ini membolehkan kita membuat keadaan yang ditulis dengan baik dan lebih kompleks dalam blok skrip menggunakan kaedah atau sifat yang dikira. Perkara -perkara ini harus diletakkan dalam skrip, bukan dalam blok templat.

Sebab utama saya menulis artikel ini ialah fungsi ini digunakan di banyak tempat dalam sistem reka bentuk yang kami kerjakan. Diakui, ini bukan ciri besar dan tidak disebutkan dalam dokumentasi, sekurang -kurangnya sejauh yang saya tahu. Walau bagaimanapun, ia berpotensi untuk membantu menjadikan elemen HTML tertentu dalam komponen.

Terbina dalam Vue<component></component> elemen

Terdapat beberapa ciri dalam Vue yang dapat mengubah pandangan secara dinamik dengan mudah. Salah satu ciri terbina dalam<component></component> elemen, yang membolehkan komponen beralih secara dinamik. Terdapat penerangan ringkas menggunakan elemen ini dengan elemen HTML dalam dokumentasi VUE 2 dan VUE 3; Inilah bahagian yang akan kita pelajari sekarang.

Konsepnya adalah untuk digunakan<component></component> Ciri -ciri elemen ini menggantikan unsur -unsur HTML yang biasa digunakan yang serupa tetapi mempunyai fungsi yang berbeza, semantik atau kesan visual. Contoh asas berikut akan menunjukkan potensi elemen ini dalam menjaga komponen VUE mudah dan kemas.

Butang atau pautan?

Butang dan pautan sering digunakan secara bergantian, tetapi fungsi, semantik dan juga visualnya sangat berbeza. Secara umumnya, butang (<button></button> ) digunakan untuk operasi dalaman dalam paparan semasa dan terikat kepada kod JavaScript. Sebaliknya, pautan (<a></a> ) bertujuan untuk menunjuk kepada sumber lain, sama ada sumbernya pada pelayan tuan rumah atau sumber luaran; Dalam kebanyakan kes ia adalah laman web. Aplikasi satu halaman cenderung lebih bergantung pada butang daripada pautan, tetapi kedua-duanya diperlukan.

Pautan sering direka secara visual untuk kelihatan seperti butang, seperti butang yang dibuat oleh kelas .btn Bootstrap. Dengan ini, kita dapat dengan mudah membuat komponen yang beralih antara kedua -dua elemen ini mengikut satu prop. Secara lalai, komponen itu akan menjadi butang, tetapi jika https://www.php.cn/link/ed2ddd0dcd323046d0f9a51e5cc51c60 digunakan, ia akan menjadi pautan.

Ini dalam templat<component></component> :

<component :https: :is="element"><slot></slot></component>

Harta mengikat ini menunjukkan harta yang dikira sebagai element bernama, manakala harta yang mengikat https://www.php.cn/link/ed2ddd0dcd323046d0f9a51e5cc51c60 menggunakan yang disebutkan dengan tepat https://www.php.cn/link/ed2ddd0dcd323046d0f9a51e5cc51c60 prop. Ini mengambil kesempatan daripada tingkah laku biasa Vue, iaitu, jika prop tidak mempunyai nilai, sifat terikat tidak akan muncul dalam elemen HTML yang diberikan. Sama ada elemen akhir adalah butang atau pautan, slot menyediakan kandungan dalaman.

Mengira sifat adalah mudah:

 elemen () {
  kembali this.https: //www.php.cn/link/ed2ddd0dcd323046d0f9a51e5cc51c60? 'a': 'butang';
}

Sekiranya terdapat https://www.php.cn/link/ed2ddd0dcd323046d0f9a51e5cc51c60 prop, maka permohonan itu<a></a> elemen; jika tidak kita mendapatnya<button></button> .

<my-button> Ini adalah butang</my-button>
<my-button https:> Ini adalah pautan</my-button>

HTML dibentangkan seperti berikut:

 <button>Ini adalah butang</button>
<a https:>Ini adalah pautan</a>

Dalam kes ini seseorang mungkin mengharapkan kedua -dua elemen itu sama dengan visual, tetapi mereka jelas berbeza untuk keperluan semantik dan boleh diakses. Iaitu, unsur -unsur kedua -dua output tidak perlu mempunyai gaya yang sama. Anda boleh menggunakan elemen dengan pemilih div.my-button dalam blok gaya, atau membuat kelas dinamik yang berubah mengikut elemen.

Matlamat keseluruhan adalah untuk mempermudahkan perkara dengan membenarkan komponen menjadikan dua elemen HTML yang berbeza seperti yang diperlukan-tidak ada v-if atau v-else !

Senarai yang dipesan atau tidak teratur?

Sama seperti contoh butang di atas, kita boleh membuat komponen yang mengeluarkan elemen senarai yang berbeza. Oleh kerana kedua -dua senarai tidak teratur dan dipesan menggunakan item senarai yang sama (<li> ) elemen sebagai elemen kanak -kanak, jadi ini mudah dilaksanakan; kita hanya perlu bertukar<ul></ul> dan<ol></ol> . Walaupun kita mahu memilih untuk menggunakan senarai keterangan<dl></dl> , ini juga mudah dilaksanakan, kerana kandungannya hanya boleh diterima<dt></dt> /<dd></dd> Slot gabungan. Kod templat sangat serupa dengan contoh butang:

<component :is="element"><slot> Tiada item senarai!</slot></component>

Sila ambil perhatian kandungan lalai di dalam elemen slot, yang akan saya bicarakan kemudian.

Terdapat prop yang menentukan jenis senarai untuk digunakan, memungkiri ul :

 Props: {
  ListType: {
    Jenis: String,
    Lalai: 'Ul'
  }
}

Begitu juga, terdapat harta yang dikira yang dipanggil element :

 elemen () {
  jika (ini $ slots.default) {
    kembali ini.listType;
  } else {
    kembali 'div';
  }
}

Dalam kes ini, kami sedang menguji sama ada slot lalai wujud, yang bermaksud ia mempunyai kandungan untuk diberikan. Jika hadir, gunakan jenis senarai yang diluluskan melalui Prop listType . Jika tidak, elemen akan menjadi<div> , ini akan memaparkan "tiada item senarai!" mesej di dalam elemen slot. Dengan cara ini, jika tiada item senarai, HTML tidak akan menjadi senarai dengan hanya satu item yang diisytiharkan tanpa item. Terserah kepada anda, walaupun, tetapi bagus untuk mempertimbangkan semantik senarai tanpa item yang sah. Satu lagi perkara yang perlu dipertimbangkan ialah alat tambahan boleh dikelirukan untuk berfikir bahawa ini adalah senarai dengan hanya satu perisytiharan projek tanpa projek. Sama seperti contoh butang di atas, anda juga boleh gaya setiap senarai dalam gaya yang berbeza. Ini boleh mencari elemen dengan nama kelas <code>ul.my-list berdasarkan pemilih. Pilihan lain adalah untuk mengubah nama kelas secara dinamik berdasarkan elemen yang dipilih.

Contoh ini mengikuti struktur penamaan kelas seperti BEM:

<component :class="`my-list ${element}`" :is="element"><slot> Tiada item senarai!</slot></component>

Penggunaannya semudah contoh butang sebelumnya:

<my-list><li> Senaraikan Item 1</li></my-list>
<my-list list-type="ol"><li>Senaraikan Item 1</li></my-list>
<my-list list-type="dl"><dt>Perkara 1</dt>
<dd> Ini adalah item satu.</dd></my-list>
<my-list></my-list>

Setiap contoh menjadikan elemen senarai yang ditentukan. Walau bagaimanapun, contoh terakhir akan menjana a

, mengisytiharkan bahawa tiada item senarai, kerana, tidak ada senarai yang akan dipaparkan! Seseorang mungkin tertanya -tanya mengapa anda ingin membuat komponen yang beralih antara jenis senarai yang berbeza apabila ia hanya boleh menjadi HTML yang mudah. Walaupun terdapat banyak manfaat untuk memasukkan senarai dalam komponen untuk gaya gaya dan penyelenggaraan, sebab -sebab lain boleh dipertimbangkan. Sebagai contoh, bagaimana jika beberapa bentuk fungsi terikat pada jenis senarai yang berbeza? Mungkin mempertimbangkan menyusun senarai dan beralih ke<ol></ol> Untuk menunjukkan susunan jenis, dan kemudian beralih kembali apabila selesai?

Sekarang kita mengawal unsur -unsur

Walaupun kedua -dua contoh ini pada dasarnya mengubah komponen unsur akar, pertimbangkan untuk pergi ke dalam komponen. Contohnya, tajuk mungkin perlu berdasarkan syarat -syarat tertentu dari<h1></h1> Berubah menjadi<h3></h3> .

---

Jika anda mendapati diri anda perlu menggunakan pengendali ternary untuk mengawal apa yang lebih daripada beberapa sifat, saya cadangkan melekat dengan v-if . Menulis lebih banyak kod untuk mengendalikan sifat, kelas, dan sifat hanya menjadikan kod lebih kompleks daripada v-if . Dalam kes ini, v-if akan menjadikan kod lebih mudah dalam jangka masa panjang, sementara kod mudah lebih mudah dibaca dan diselenggara.

Apabila mencipta komponen, jika terdapat v-if mudah untuk menukar antara unsur-unsur, pertimbangkan aspek kecil fungsi utama Vue ini.

Idea Lanjutan, Sistem Kad Fleksibel

Pertimbangkan semua yang telah kami tutupi setakat ini dan memohon kepada komponen kad yang fleksibel. Contoh komponen kad ini membolehkan tiga jenis kad yang ditempatkan di bahagian tertentu susun atur artikel:

<li> Kad Hero: Ini dijangka digunakan di bahagian atas halaman dan lebih menarik daripada kad lain. <li> Call to Action Card: Digunakan sebagai satu siri tindakan pengguna sebelum atau dalam artikel. <li> Kad Maklumat: Digunakan untuk petikan.

Fikirkan ini sebagai mengikuti sistem reka bentuk, dan komponen mengawal HTML untuk semantik dan gaya.

Dalam contoh di atas, anda dapat melihat kad wira di bahagian atas, diikuti dengan satu siri panggilan ke kad tindakan, dan kemudian -menundukkan sedikit -anda akan melihat kad mesej di sebelah kanan.

Berikut adalah kod templat untuk komponen kad:

<component :class="`card ${type}`" :is="elements('root')">
  <component :style="bg()" :is="elements('header')">
    <slot name="header"></slot>
  </component>
  <div>
    <slot name="content"></slot>
  </div>
  <component :is="elements('footer')">
    <slot name="footer"></slot>
  </component>
</component>

Terdapat tiga elemen "komponen" dalam kad. Setiap elemen mewakili elemen tertentu dalam kad, tetapi akan berubah mengikut jenis kad. Setiap komponen memanggil kaedah elements() dengan parameter yang mengenal pasti bahagian kad panggilan.

Kaedah elements() adalah:

 elemen (yang) {
  const tags = {
    Hero: {root: 'seksyen', header: 'h1', footer: 'date'},
    cta: {root: 'seksyen', header: 'h2', footer: 'div'},
    Maklumat: {root: 'selain', header: 'h3', footer: 'kecil'}
  }
  tag kembali [this.type] [yang];
}

Mungkin terdapat banyak cara untuk menangani perkara ini, tetapi anda perlu bergerak ke arah yang sesuai dengan keperluan komponen anda. Dalam kes ini, terdapat objek yang menjejaki tag elemen HTML untuk setiap bahagian setiap jenis kad. Kaedah kemudian mengembalikan elemen HTML yang diperlukan berdasarkan jenis kad semasa dan parameter yang diluluskan.

Untuk gaya, saya memasukkan kelas pada elemen akar kad yang berdasarkan jenis kad. Ini menjadikannya sangat mudah untuk membuat setiap jenis CSS seperti yang diperlukan. Anda juga boleh membuat CSS berdasarkan elemen HTML itu sendiri, tetapi saya lebih suka kelas. Perubahan masa depan kepada komponen kad boleh mengubah struktur HTML dan tidak mungkin mengubah logik membuat kelas.

Kad itu juga menyokong imej latar belakang pada tajuk kad Hero. Ini dilakukan dengan meletakkan atribut yang dikira mudah bg pada elemen tajuk. Inilah atribut yang dikira:

 bg () {
  Kembalikan ini.Background? `latar belakang-imej: url ($ {this.background})`: null;
}

Jika URL imej disediakan di background Prop, harta yang dikira mengembalikan rentetan untuk gaya inline yang menggunakan imej sebagai imej latar belakang. Penyelesaian yang agak mudah yang boleh menjadikannya lebih kuat. Sebagai contoh, ia boleh menyokong warna tersuai, kecerunan, atau warna lalai (jika tiada imej disediakan). Contoh ini tidak melibatkan banyak kemungkinan, kerana setiap jenis kad mungkin mempunyai prop pilihan sendiri untuk pemaju untuk memanfaatkannya.

Inilah kad wira dalam demo ini:

<custom-card background="https://picsum.photos/id/237/800/200" type="hero">
  <template v-slot:header>Tajuk artikel</template>
  <template v-slot:content>Lorem ipsum ...</template>
  <template v-slot:footer>1 Januari 2011</template>
</custom-card>

Anda akan melihat bahawa setiap bahagian kad mempunyai slot kandungannya sendiri. Dan, untuk kesederhanaan, teks adalah satu -satunya perkara yang diharapkan dalam slot. Komponen kad memproses elemen HTML yang diperlukan mengikut jenis kad. Membuat komponen mengharapkan hanya teks yang menggunakan komponen agak mudah. Ia menggantikan keperluan untuk membuat keputusan mengenai struktur HTML, dengan itu memudahkan pelaksanaan kad.

Sebagai perbandingan, berikut adalah dua jenis lain yang digunakan dalam demo:

<custom-card type="cta">
  <template v-slot:header>CTA Tajuk Satu</template>
  <template v-slot:content>Lorem Ipsum Dolor Sit Amet, Conceptetur Apiscing Elit.</template>
  <template v-slot:footer>footer</template>
</custom-card>
<custom-card type="info">
  <template v-slot:header>Inilah petikan</template>
  <template v-slot:content>"Maecenas ... Quis."</template>
  <template v-slot:footer>yang mengatakannya</template>
</custom-card>

Sekali lagi, ambil perhatian bahawa setiap slot hanya mengharapkan teks, kerana setiap jenis kad menghasilkan elemen HTML sendiri mengikut definisi kaedah elements() . Jika anda berfikir pada masa akan datang bahawa unsur -unsur HTML yang berbeza harus digunakan, anda hanya perlu mengemas kini komponen. Ciri -ciri kebolehcapaian bangunan adalah satu lagi kemas kini masa depan yang berpotensi. Fungsi interaksi juga boleh diperluaskan berdasarkan jenis kad.

Kekuatan komponen dalam komponen

Pelik dinamakan dalam komponen vue<component></component> Unsur -unsur pada asalnya direka untuk satu perkara, tetapi seperti yang sering berlaku, ia mempunyai kesan sampingan yang kecil yang menjadikannya sangat berguna dengan cara lain.<component></component> Unsur -unsur direka untuk secara dinamik menukar komponen VUE dalam komponen lain seperti yang diperlukan. Idea asas tentang ini mungkin sistem tab untuk menukar antara komponen yang bertindak sebagai halaman; Ini sebenarnya dijelaskan dalam dokumentasi VUE. Tetapi ia menyokong melakukan perkara yang sama untuk elemen HTML.

Berikut adalah contoh teknologi baru yang dikongsi oleh rakan, yang telah menjadi alat yang sangat berguna dalam ciri Vue yang saya gunakan. Saya harap siaran ini akan menyampaikan idea dan maklumat mengenai ciri kecil ini kepada anda dan membolehkan anda meneroka bagaimana untuk memanfaatkannya dalam projek VUE anda sendiri.