Rumah > Artikel > hujung hadapan web > Bilakah vue harus menggunakan slot?
Senario penggunaan: Slot membenarkan pengguna mengembangkan komponen untuk menggunakan semula komponen dengan lebih baik dan menyesuaikannya jika komponen induk menggunakan komponen yang digunakan semula, Mendapatkan komponen ini mempunyai sejumlah kecil perubahan di tempat yang berbeza, dan adalah tidak bijak. untuk menulis semula komponen. Hantar kandungan ke lokasi yang ditentukan di dalam komponen melalui slot untuk melengkapkan aplikasi komponen boleh guna semula ini dalam senario yang berbeza seperti komponen reka letak, lajur jadual, pilihan lungsur turun, kandungan paparan kotak pop timbul, dsb.
Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.
Dalam HTML elemen slot
, sebagai sebahagian daripada suite teknologi Web Components
, ialah pemegang tempat dalam komponen web
Pemegang tempat ini boleh diisi dengan bahasa penanda anda sendiri kemudian
Sebagai contoh,
<template id="element-details-template"> <slot name="element-name">Slot template</slot> </template> <element-details> <span slot="element-name">1</span> </element-details> <element-details> <span slot="element-name">2</span> </element-details>
template
tidak akan dipaparkan pada halaman dan perlu digunakan Mula-mula Dapatkan rujukannya dan kemudian tambahkannya pada DOM
Perkara yang sama berlaku untuk konsep
customElements.define('element-details', class extends HTMLElement { constructor() { super(); const template = document .getElementById('element-details-template') .content; const shadowRoot = this.attachShadow({mode: 'open'}) .appendChild(template.cloneNode(true)); } })
dalam Vue
Slot
Slot nama pentas, nama bunga "menduduki the pit", kita Dapat difahami bahawa solt telah menduduki kedudukan yang baik dalam templat komponen. Apabila teg komponen digunakan, kandungan dalam teg komponen akan mengisi lubang secara automatik (menggantikan kedudukan slot dalam templat komponen ), berfungsi sebagai saluran keluar untuk membawa kandungan yang diedarkan
Ia boleh dibandingkan dengan konsol permainan FC jenis kad Konsol permainan mendedahkan slot kad (slot) untuk pengguna memasukkan jalur magnet permainan yang berbeza (kandungan tersuai )
Menggunakan slot membolehkan pengguna mengembangkan komponen untuk menggunakan semula komponen dengan lebih baik dan menyesuaikannya
Jika komponen induk menggunakan komponen yang digunakan semula Kadangkala, adalah tidak bijak untuk mendapatkan komponen ini dengan sedikit perubahan di tempat yang berbeza Adalah tidak bijak untuk menulis semula komponen
Hantar kandungan ke lokasi yang ditentukan di dalam komponen melalui slot slot ke. lengkapkan penggunaan semula komponen. Aplikasi dalam senario berbeza
seperti komponen reka letak, lajur jadual, pilihan lungsur turun, kandungan paparan kotak timbul, dsb.
slot boleh dibahagikan kepada Terdapat tiga jenis:
Slot lalai
Slot bernama
Slot slot skop
Slot lalai
Subkomponen menggunakan teg 58cb293b8600657fad49ec2c8d37b472 untuk menentukan kedudukan pemaparan, di dalam teg Anda boleh meletakkan struktur DOM Apabila komponen induk digunakan, tiada kandungan dihantar ke slot .
Apabila komponen induk digunakan, tulis terus ke dalam teg komponen anak Kandungannya ialah
komponen anak Child.vue
<template> <slot> <p>插槽后备的内容</p> </slot> </template>
komponen induk <.>
<Child> <div>默认插槽</div> </Child>
slot bernama
Komponen anak menggunakan atribut nama untuk mewakili nama slot dan tidak melepasinya sebagai slot lalaiApabila digunakan dalam komponen induk, tambahkan atribut slot berdasarkan slot lalai dan nilainya ialah nilai atribut nama slot Komponen anakKomponen anak Child.vue<template> <slot>插槽后备的内容</slot> <slot name="content">插槽后备的内容</slot> </template>Komponen induk
<child> <template v-slot:default>具名插槽</template> <!-- 具名插槽⽤插槽名做参数 --> <template v-slot:content>内容...</template> </child>
Slot skop
Komponen anak mengikat sifat pada skop untuk melepasi maklumat komponen anak kepada komponen induk sifat ini akan digantung pada objek yang diterima oleh slot v komponen induk Dalam komponen induk, gunakan v-slot: (singkatan: #) untuk mendapatkan maklumat bagi komponen kanak-kanak apabila menggunakannya, dan gunakan komponen kanak-kanak Child.vue<template> <slot name="footer" testProps="子组件的值"> <h3>没传footer插槽</h3> </slot> </template>komponen induk
<child> <!-- 把v-slot的值指定为作⽤域上下⽂对象 --> <template v-slot:default="slotProps"> 来⾃⼦组件数据:{{slotProps.testProps}} </template> <template #default="slotProps"> 来⾃⼦组件数据:{{slotProps.testProps}} </template> </child>Ringkasan:
, tetapi boleh digunakan pada slot lalai sahaja Gunakan v-slot
d477f9ce7bf77f53fbcf36bec1b69b7a
dan menulis terus default
default
v-slot
#default
dan mentakrifkan nilai lalai v-slot={user}
v-slot="{user: newName}"
v-slot="{user = '默认值'}"
Atas ialah kandungan terperinci Bilakah vue harus menggunakan slot?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!