Cara menggunakan slot bernama slot v dalam Vue

Vue ialah rangka kerja JavaScript yang popular, terutamanya popular apabila membina aplikasi halaman tunggal bahagian hadapan. Vue menyediakan pelbagai fungsi dan API terbina dalam, salah satunya menggunakan slot bernama slot v. Dalam artikel ini, kami akan memahami konsep slot yang dinamakan slot v dan menerangkan cara menggunakannya dengan memberikan contoh praktikal.

Apakah slot yang dinamakan slot?

slot v yang dinamakan slot ialah mekanisme slot yang lebih fleksibel dan berkuasa dalam Vue. Konsep asas adalah untuk menyediakan komponen dengan titik sisipan tambahan (iaitu slot) supaya anda boleh memasukkan kandungan anda sendiri ke dalam komponen. v-slot Slot bernama membenarkan anda memberi nama slot supaya ia boleh dirujuk di dalam templat komponen.

Dalam Vue 2.x, gunakan arahan v-slot untuk menentukan kandungan slot dan hantarkannya kepada komponen anak apabila komponen induk berjalan. Dalam Vue 3.x, arahan v-slot telah dinamakan semula #, tetapi sintaksnya tetap sama.

Menggunakan slot bernama slot v

Mari kami menunjukkan cara menggunakan slot bernama slot v melalui contoh praktikal.

Kami akan mencipta komponen TodoList yang akan memaparkan item tugasan. Menggunakan slot bernama slot v, kami mencipta dua slot - satu untuk memaparkan kandungan satu item dalam senarai tugasan dan satu lagi untuk memaparkan kandungan selepas tamat senarai.

Berikut ialah contoh kod untuk templat komponen TodoList:

<template>
  <div>
    <h2>{{ title }}</h2>
    <ul>
      <slot name="item" v-for="item in items" :item="item"></slot>
    </ul>
    <slot name="after"></slot>
  </div>
</template>

Dalam kod di atas, kami menggunakan arahan v-for untuk menggelung melalui tatasusunan item, dan kemudian menggunakan arahan slot untuk secara dinamik v-untuk elemen Masukkan ke dalam slot "item". Begitu juga, kami mentakrifkan slot bernama "selepas" di hujung senarai untuk memaparkan kandungan selepas akhir senarai.

Sekarang, mari lihat contoh menggunakan komponen TodoList. Berikut ialah contoh kod templat komponen induk:

<template>
  <div>
    <todo-list :title="title" :items="items">
      <template v-slot:item="props">
        <li>{{ props.item }}</li>
      </template>
      <template v-slot:after>
        <p>List ended.</p>
      </template>
    </todo-list>
  </div>
</template>

<script>
import TodoList from './TodoList.vue';

export default {
  name: 'App',
  components: {
    TodoList,
  },
  data() {
    return {
      title: 'My Todo List',
      items: ['Item 1', 'Item 2', 'Item 3'],
    };
  },
};
</script>

Dalam kod di atas, kami mula-mula mengimport komponen TodoList melalui arahan import. Kami kemudian menggunakan elemen todo-list dalam templat komponen induk dan menghantar data kepada komponen TodoList melalui arahan v-bind. Akhir sekali, kami menggunakan slot yang dinamakan untuk memasukkan item tersuai dan kandungan tamat ke dalam komponen TodoList.

Ringkasan

Dalam artikel ini, kami mempelajari konsep dan penggunaan slot yang dinamakan slot v dalam Vue. Dengan slot bernama slot v, kami boleh mempunyai kawalan yang lebih baik ke atas kandungan komponen dan mencipta komponen boleh guna semula dengan cara yang lebih fleksibel dan berkuasa. Apabila menggunakan slot bernama slot v dalam projek sebenar, berikan slot nama yang bermakna untuk menjadikan kod lebih mudah dibaca dan diselenggara.

Atas ialah kandungan terperinci Cara menggunakan slot bernama slot v dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!