Artikel yang menganalisis slot dalam Vue

Artikel ini akan memberi anda pemahaman yang mendalam tentang slot dalam vue dan membantu anda bermain dengan slot Vue, saya harap ia akan membantu semua orang.

Dalam Vue, slot ialah ciri yang sangat berkuasa, yang boleh meningkatkan fleksibiliti komponen terkapsul Contohnya, jika anda menggunakan slot semasa membungkus komponen, Kemudian apabila komponen induk memanggilnya, kandungan di sini boleh ditakrifkan secara bebas oleh komponen induk, tanpa perlu memikirkan cara untuk merangkumi pelbagai senario penggunaan apabila merangkum komponen. (Belajar perkongsian video: tutorial video vue)

Slot asas

Andaikan kita kini mempunyai komponen yang perlu dikapsulkanSlotComponent

<template>
  <div>这是一个slot：<slot> </slot></div>
</template>

<SlotComponent>来自父组件的内容</SlotComponent>

Kandungan dalam slot boleh ditakrifkan sewenang-wenangnya dalam komponen induk. Jika tiada elemen <slot> dalam komponen, kandungan antara teg permulaan dan akhir komponen akan hilang apabila komponen induk dipanggil.

Memandangkan slot berada dalam komponen SlotComponent, bolehkah data dalam komponen SlotComponent digunakan apabila dipanggil dalam komponen induk? Jelas sekali tidak mungkin, kerana mereka berada dalam skop yang berbeza.

Semua kandungan dalam templat induk disusun dalam skop induk; semua kandungan dalam templat anak disusun dalam skop kanak-kanak.

Kandungan lalai slot

Slot juga boleh menetapkan kandungan lalai, yang sedikit seperti nilai lalai parameter fungsi dalam es6, apabila induk Jika tiada kandungan disediakan semasa komponen dipanggil, nilai lalai akan diberikan. Jika kandungan disediakan, ia akan menggantikan kandungan lalai.

<template>
  <div>
    <slot>这是slot的默认内容</slot>
  </div>
</template>

<DefaultSlot></DefaultSlot>

Tiada kandungan yang disediakan antara teg apabila dipanggil dan nilai lalai diberikan, menjadi kandungan yang dilindungi.

Slot bernama

Jika saya perlu menggunakan slot di berbilang tempat dalam komponen, saya perlu memberikan slot Tambah name untuk membezakan tempat kandungan dipaparkan.

// named slot，名字叫 NamedSlot
<template>
  <div>
    这是具名插槽
    <div>
      <slot name="slot1"></slot>
    </div>
    <div>
      <slot name="slot2"></slot>
    </div>
    <div>
      <slot name="slot3"></slot>
    </div>
  </div>
</template>

// 在父组件中调用
<NamedSlot>
    <template v-slot:slot1>这是插入slot1的内容</template>
    <template v-slot:slot2>这是插入slot2的内容</template>
    <template v-slot:slot3>这是插入slot3的内容</template>
</NamedSlot>

Selepas menambah atribut slot pada name, kandungan boleh diedarkan dalam bentuk v-slot:slotName. Jika atribut name tidak diberikan, name akan lalai kepada default, yang bersamaan dengan v-slot:default dan juga boleh disingkatkan kepada #default.

Perhatikan bahawa v-slot hanya boleh ditambah pada <template> , tetapi terdapat kes khas, yang akan dibincangkan kemudian.

Bagaimanakah slot mengakses kandungan komponen anak?

Melalui slot, kita boleh menambah kandungan pada komponen anak dalam komponen induk, tetapi skop komponen induk dan anak adalah berbeza, apakah yang perlu kita lakukan jika kita ingin menggunakan data komponen anak dalam komponen induk?

boleh mengikat atribut pada komponen anak <slot> elemen, dan nilainya ialah kandungan yang anda perlu hantar kepada komponen induk.

// 子组件 组件名称为 SlotProp
<div>
    <slot name="slot1" :value1="child1"></slot>
    <slot name="slot2" :value2="child2"></slot>
</div>
//调用
<SlotProp>
  <template v-slot:slot1="slotProps">
    {{ slotProps.value1 }}
  </template>
  <template v-slot:slot2="slotProps">
    {{ slotProps.value2 }}
  </template>
</SlotProp>

Ringkasnya, ia adalah untuk mengikat nilai dalam bentuk slot pada :key='value', dan apabila

dipanggil oleh komponen induk, ia boleh diperolehi dalam bentuk v-slot:slotName="slotProps" Untuk nilai ini, nama slotProps boleh ditakrifkan sendiri dan

boleh digunakan untuk mendapatkan nilai ini melalui slotProps[key].

Jika komponen hanya mempunyai satu templat lalai, anda tidak perlu menulis template pada v-slot:slotName="slotProps" Anda boleh terus menulis v-slot

<SlotProp v-slot:default="slotProps">
    {{ slotProps.value1 }}
</SlotProp>

seperti yang dinyatakan di atas pada. nama komponen. Walau bagaimanapun, jika name tidak dinyatakan, ia akan dianggap sebagai default Perkara yang sama berlaku di sini, v-slot:default="slotProps" boleh disingkatkan sebagai v-slot="slotProps".

Memusnahkan slotProps

Kerja dalaman slot berskop adalah untuk membungkus kandungan slot anda dalam fungsi yang diluluskan dalam satu hujah

Berdasarkan prinsip pelaksanaan slot, kami juga boleh menggunakan beberapa sintaks ES6 untuk mengendalikan slotProps, seperti memusnahkan, penamaan semula prop dan Tetapkan nilai lalai dsb.

// 解构
<SlotProp v-slot="{ value1 }">
    {{ value1 }}
</SlotProp>

// 重命名,将 value1 重命名为 name1
<SlotProp v-slot="{ value1: name1 }">
    {{ name1 }}
</SlotProp>

// 赋默认值
<SlotProp v-slot="{ value1 = &#39;这是默认值&#39; }">
    {{ value1 }}
</SlotProp>

Nama slot dinamik

slot menyokong slot dinamik melalui <template v-slot:[dynamicSlotName]>.

Kadangkala berbilang slot disisipkan dalam gelung dalam komponen asas Contohnya,

<div v-for="item in slotList" :key="item">
      <slot :name="item"></slot>
</div>

boleh digunakan apabila memanggil nama slot dinamik . Gelung untuk memaparkan secara dinamik slot

yang sepadan

<template
  v-for="item in slotList"
  v-slot:[item]
>
    {{item}}
</template>

（学习视频分享：web前端开发、编程基础视频）

Atas ialah kandungan terperinci Artikel yang menganalisis slot dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!