Apakah slot? Mari kita bincangkan tentang cara menggunakan slot dalam Vue3

Vue Saya percaya bahawa semua orang yang telah menggunakan Vue telah menggunakannya lebih kurang, tetapi adakah anda tahu semua kegunaannya? Artikel ini akan membawakan anda semua penggunaan slot dalam Vue3 untuk membantu anda mencari dan mengisi jurang. (Belajar perkongsian video: tutorial video vue)

Apakah itu slot

Ringkasnya, ia adalah yang disediakan dalam subkomponen 坑位 yang digunakan oleh komponen induk diwakili oleh <slot></slot> Komponen induk boleh mengisi sebarang kod templat dalam lubang ini dan kemudian <slot></slot> dalam komponen anak akan digantikan dengan kandungan ini. Contohnya, dalam contoh slot termudah

//父组件
<template>
  <div>
    <child>Hello Juejin</child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//子组件Child
<template>
    <div>
        <p>1</p>
        <slot></slot>
        <p>2</p>
    </div>
</template>

, <slot></slot> dalam komponen anak ialah kandungan yang diletakkan oleh komponen induk di antara tag komponen anak <child></child>. Sudah tentu, anda boleh menghantar sebarang coretan kod dalam tempoh ini dan ia akan diletakkan di lokasi <slot></slot>.

Begitu juga, anda juga boleh meletakkan pembolehubah antara teg <child></child>, seperti

//父组件
<template>
  <div>
    <child>{{ msg }}</child>
  </div>
</template>
<script>
import { ref } from &#39;vue&#39;
import Child from &#39;./Child.vue&#39;
const msg = ref(&#39;Hello Juejin&#39;)
</script>

Izinkan saya menerangkan kedua-dua teg yang kerap muncul perkataan 插槽 dan 插槽内容 mengelakkan kekeliruan dalam bacaan kemudian:

Yang sama 插槽 mewakili pembolehubah msg ini. Oleh itu, komponen anak 插槽 boleh mengakses skop data komponen induk, tetapi 插槽内容 tidak boleh mengakses data komponen anak (iaitu, data dalam komponen anak tidak boleh digunakan antara dua <child></child> dalam komponen induk), ini adalah skop pemaparan yang dipanggil. Kami akan memperkenalkan kemudian kaedah 插槽 menghantar parameter kepada 插槽内容

Kandungan lalai

Apabila komponen induk tidak memberikan sebarang 插槽内容, kami boleh sediakan 插槽 komponen anak menentukan kandungan lalai, seperti

//子组件
<template>
    <div>
        <slot>我是默认内容</slot>
    </div>
</template>

//父组件1
<template>
  <div>
    <child></child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//父组件2
<template>
  <div>
    <child>Hello Juejin</child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

Pada masa ini, 父组件1 memaparkan kandungan lalai

父组件2 memaparkan Kandungan yang disediakan

Slot Dinamakan

Banyak kali satu 插槽 tidak dapat memenuhi keperluan kita, kita perlu berbilang 插槽 . Jadi terdapat 具名插槽, iaitu 插槽 dengan nama. Ringkasnya, tujuan 具名插槽 ini adalah untuk membuat lubang untuk lobak merah dan biarkan mereka tinggal di tempat yang sepatutnya. Contohnya, slot name dengan <slot name="xx"></slot> dipanggil slot bernama. name yang tidak disediakan akan secara tersirat dinamakan "lalai". Anda boleh menggunakan <slot></slot> (boleh disingkatkan sebagai v-slot:xxx) elemen #xxx arahan dalam komponen induk untuk menghantar nama slot sasaran untuk memadankan <template></template> yang sepadan. Contohnya, 插槽

//子组件

<template>
    <div>
        <!-- 大萝卜 -->
        <div>
            <slot></slot>
        </div>
        <!-- 小萝卜 -->
        <div>
            <slot></slot>
        </div>
        <!-- 中萝卜 -->
        <div>
            <slot></slot>
        </div>
    </div>
</template>

//父组件

<template>
  <div>
    <child>
      <!-- #smallTurnip 为v-slot:smallTurnip缩写 -->
      <template>
        小萝卜
      </template>
      <template>
        中萝卜
      </template>
      <template>
        大萝卜
      </template>
    </child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

, jadi tidak perlu mengambil berat tentang pesanan dalam komponen induk Anda hanya perlu menulis templat dan menamakannya, dan ia secara automatik akan pergi ke lokasi yang sepadan.

Nama slot dinamik

Nama slot dinamik ialah nama slot dalam bentuk pembolehubah Kami boleh mengubah suai pembolehubah ini pada bila-bila masa untuk menunjukkan kesan yang berbeza. Ia ditulis sebagai

atau disingkatkan sebagai v-slot:[变量名]. #[变量名]

//父组件
<template>
  <div>
    <child>
      <!-- 等同于#smallTurnip -->
      <template>
        小萝卜
      </template>
      <template>
        中萝卜
      </template>
      <template>
        大萝卜
      </template>
    </child>
  </div>
</template>
<script>
import { ref } from &#39;vue&#39;
import Child from &#39;./Child.vue&#39;
const slotName = ref(&#39;smallTurnip&#39;)
</script>

Slot skop

Slot skop

Seperti yang dinyatakan di atas,

tidak boleh diakses Data bagi komponen kanak-kanak, tetapi bagaimana jika kita mahu mengakses keadaan komponen kanak-kanak dalam 插槽内容? 插槽内容

Malah,

boleh mengikat sifat pada tag 插槽 dan menghantarnya kepada slot dalam komponen induk sama seperti menghantar prop kepada komponen. Mula-mula, mari kita lihat kaedah pemindahan nilai slot lalai插槽内容

//子组件
<template>
    <div>
        <slot></slot>
    </div>
</template>

//父组件

<template>
  <div>
    <child>
      My name is {{ slotProps.personName }} and I am {{ slotProps.age }} years old this year
    </child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

Anda juga boleh mendapatkan data yang disediakan oleh

dalam bentuk strukturslot

<template>
  <div>
    <child>
      My name is {{ personName }} and I am {{ age }} years old this year
    </child>
  </div>
</template>

注意不能绑定name属性，因为你绑定了name它就成了具名插槽了。同样具名插槽中的name属性也不会传递给插槽内容。因为传递的参数只能在插槽内容中使用，所以这类能够接受参数的插槽就被称为了作用域插槽。

具名作用域插槽

下面再看下具名作用域插槽它的传参方式。它接收参数的方式是通过template标签的指令v-slot的值获取的，所以可以缩写成这样

//父组件
<template>
  <div>
    <child>
      <template>
        {{ bigTurnipProps.message }}
      </template>
    </child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//子组件Child.vue

<template>
    <div>
        <!-- 大萝卜 -->
        <div>
            <slot></slot>
        </div>
    </div>
</template>

这类插槽便是具名作用域插槽啦

写在最后

到这里插槽(slot)的全部用法基本就已经介绍完啦。如果感觉对你有用的话赶紧点赞收藏吧！

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

Atas ialah kandungan terperinci Apakah slot? Mari kita bincangkan tentang cara menggunakan slot dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!