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.

Apakah itu slot

---

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 )

Senario penggunaan

---

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.

Kategori

---

slot boleh dibahagikan kepada Terdapat tiga jenis:

• Slot lalai

• Slot bernama

• Slot slot skop

Slot lalai

Subkomponen menggunakan teg 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 lalai

Apabila digunakan dalam komponen induk, tambahkan atribut slot berdasarkan slot lalai dan nilainya ialah nilai atribut nama slot Komponen anak

Komponen 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< dalam kandungan 🎜>

<child> 
    <!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
    <template v-slot:default="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
    <template #default="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
</child>

Ringkasan:

• atribut hanya boleh digunakan pada

  , tetapi boleh digunakan pada slot lalai sahaja Gunakan v-slot<template>

pada teg komponen. Nama slot lalai ialah
• Anda boleh meninggalkan

  dan menulis terus defaultdefaultv-slot

, yang disingkatkan sebagai # Anda mesti menulis parameter sebagai

• #default

Anda boleh mendapatkan
• melalui penstrukturan Anda juga boleh menamakan semula

  dan mentakrifkan nilai lalai v-slot={user}v-slot="{user: newName}"v-slot="{user = '默认值'}"

Berkaitan. cadangan:

tutorial video vue.js

Atas ialah kandungan terperinci Bilakah vue harus menggunakan slot?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!