Memahami Slot dalam API Komposisi Vue ith

Slot ialah mekanisme berkuasa dalam Vue yang membolehkan komponen mentakrifkan kawasan kandungan yang boleh disesuaikan oleh komponen induk. Ini menggalakkan kebolehgunaan semula dan fleksibiliti dalam membina komponen UI. Vue 3 menawarkan dua jenis slot utama:

• Slot Biasa: Sediakan cara mudah untuk menyuntik kandungan daripada komponen induk ke dalam templat komponen anak.
• Slot Berskop: Benarkan penyesuaian yang lebih maju dengan menghantar data (skop) daripada komponen anak kepada kandungan slot, mendayakan pemaparan dinamik berdasarkan data induk dan anak.

Dalam Vue 3, slot membolehkan anda mencipta komponen fleksibel dengan menyediakan cara untuk menghantar kandungan ke dalam komponen kanak-kanak. API Komposisi meningkatkan cara kami menggunakan slot, menjadikannya lebih intuitif dan berkuasa.

Apakah Slot?

Slot ialah cara untuk menentukan kandungan pemegang tempat dalam komponen yang boleh diisi dengan kandungan tersuai apabila komponen digunakan. Mereka membantu dalam mencipta komponen yang boleh diguna semula dan boleh disesuaikan.

Jenis-jenis Slot

• Slot Lalai: Jenis yang paling biasa, ia membolehkan anda menghantar kandungan tanpa sebarang nama khusus.
• Slot Dinamakan: Ini membolehkan anda menentukan slot berbeza dengan nama unik, membolehkan reka letak yang lebih kompleks.
• Slot Berskop: Ini menyediakan cara untuk mendedahkan data daripada komponen anak kepada komponen induk menggunakan slot. Menggunakan Slot dengan API Komposisi

Menggunakan Slot dengan API Komposisi

Begini cara anda boleh mentakrif dan menggunakan slot dalam komponen Vue 3 menggunakan API Komposisi:
Contoh Slot Lalai

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

Penggunaan:

<MyComponent>
  <p>This is some content passed to the default slot!</p>
</MyComponent>

Dinamakan Slot

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'LayoutComponent',
});
</script>

Penggunaan:

<LayoutComponent>
  <template #header>
    <h1>Header Content</h1>
  </template>

  <p>Main Content goes here!</p>

  <template #footer>
    <footer>Footer Content</footer>
  </template>
</LayoutComponent>

Slot Berskop

Slot berskop membolehkan anda menghantar data daripada komponen anak kembali kepada induk.

<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MessageComponent',
  setup() {
    const message = ref("Hello from the child!");

    return { message };
  },
});
</script>

Penggunaan:

<MessageComponent>
  <template #default="{ message }">
    <p>{{ message }}</p>
  </template>
</MessageComponent>

Contoh: Penghantaran Produk Makanan dengan Slot dalam Vue 3

Jom buat aplikasi penghantaran makanan mudah menggunakan Vue 3 dengan API Komposisi dan slot. Contoh ini akan mempamerkan komponen FoodDelivery utama yang menggunakan slot untuk memaparkan senarai item makanan, bersama-sama dengan pengepala dan pengaki.

Langkah 1: Buat Komponen Utama

Inilah komponen FoodDelivery yang menerima slot bernama untuk pengepala, item makanan dan pengaki.

<template>
  <div class="food-delivery">
    <slot name="header"></slot>
    <div class="food-items">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FoodDelivery',
});
</script>

<style>
.food-delivery {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
}

.food-items {
  margin: 20px 0;
}
</style>

Langkah 2: Buat Komponen Item Makanan

Seterusnya, mari buat komponen FoodItem yang mudah untuk mewakili produk makanan individu.

<template>
  <div class="food-item">
    <h3>{{ name }}</h3>
    <p>Price: ${{ price.toFixed(2) }}</p>
    <button @click="addToCart">Add to Cart</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FoodItem',
  props: {
    name: {
      type: String,
      required: true,
    },
    price: {
      type: Number,
      required: true,
    },
  },
  methods: {
    addToCart() {
      // Logic to add the item to the cart
      console.log(`${this.name} added to cart!`);
    },
  },
});
</script>

<style>
.food-item {
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
</style>

Langkah 3: Menggunakan Komponen

Sekarang, mari kita susun semuanya dalam komponen induk yang menggunakan komponen FoodDelivery dan FoodItem kami.

Biar saya Jelaskan

Komponen Penghantaran Makanan: Komponen ini bertindak sebagai susun atur untuk perkhidmatan penghantaran makanan kami. Ia menerima tiga slot: pengepala, slot lalai untuk item makanan dan pengaki.
Komponen FoodItem: Ini mewakili produk makanan individu. Ia mengambil nama dan harga sebagai prop dan mempunyai kaedah untuk mensimulasikan penambahan item pada troli.

• Komponen Apl: Ini ialah komponen induk di mana segala-galanya disatukan. Ia menggunakan komponen FoodDelivery dan mengisi slot dengan mesej alu-aluan, senarai komponen FoodItemkomponen dan mesej terima kasih.

Kes Penggunaan

• Menyesuaikan Senarai: Slot berskop sesuai untuk membuat komponen senarai di mana setiap item boleh mempunyai logik pemaparan yang berbeza berdasarkan sifatnya. Komponen anak boleh menghantar data item ke slot dan komponen induk boleh menentukan templat untuk setiap item menggunakan slot berskop. (BasePaginated.vue)
• Rendering Bersyarat: Slot berskop membolehkan pemaparan terpilih dalam komponen anak berdasarkan data yang diberikan kepada slot. Sebagai contoh, anda boleh memaparkan mesej atau keadaan ralat secara bersyarat dalam kandungan slot.
• Reka Letak Kompleks: Slot berskop memudahkan penciptaan reka letak yang lebih rumit di mana bahagian reka letak yang berbeza boleh disesuaikan oleh komponen induk sambil membenarkan komponen kanak-kanak menyuntik kandungan atau fungsi tertentu menggunakan skop.

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

<MyComponent>
  <p>This is some content passed to the default slot!</p>
</MyComponent>

Pertimbangan Lanjutan

• Slot Berskop Dinamakan: Anda boleh menetapkan nama kepada slot berskop (cth., ...), membolehkan anda mempunyai berbilang slot berskop dalam komponen anak tunggal dan merujuknya dengan nama dalam komponen induk.
• Fungsi Slot: Dalam Vue 2, slot telah diakses sebagai $slot dalam komponen kanak-kanak. Vue 3 menawarkan pendekatan yang lebih reaktif menggunakan $scopedSlots, iaitu fungsi yang menyediakan akses kepada kandungan slot. Ini membolehkan manipulasi slot dinamik dan pemaparan bersyarat dalam komponen anak.

Mari tingkatkan contoh slot berskop untuk menjadikannya lebih jelas dan berfungsi. Contoh ini akan menunjukkan cara menggunakan slot berskop untuk menghantar data item daripada komponen anak kepada komponen induk, membenarkan pemaparan yang fleksibel.

Langkah 1: Buat Komponen Senarai Item

Komponen ini akan memaparkan senarai item dan menggunakan slot berskop untuk membolehkan ibu bapa menyesuaikan cara setiap item dipaparkan.

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'LayoutComponent',
});
</script>

Langkah 2: Menggunakan Komponen Senarai Item dengan Slot Berskop

Sekarang, mari buat komponen induk yang menggunakan komponen ItemList dan menyediakan templat tersuai untuk memaparkan setiap item menggunakan slot berskop.

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

Komponen Senarai Item:

• Komponen ini mentakrifkan senarai item dan menggunakan slot berskop untuk mendedahkan setiap item kepada komponen induk.
• Jika tiada slot disediakan, ia lalai untuk memaparkan perihalan item. ###Komponen Induk:
• Komponen ini menggunakan ItemList dan menyediakan templat tersuai untuk memaparkan setiap item.
• Ia mengakses data item melalui slot berskop dan termasuk butang yang mencetuskan fungsi apabila diklik.

Contoh menunjukkan cara menggunakan slot berskop dalam Vue 3 dengan berkesan untuk mencipta struktur komponen yang fleksibel dan boleh digunakan semula. Komponen induk boleh menyesuaikan pemaparan setiap item sambil masih mengakses data yang disediakan oleh komponen anak.

Mari kita imbas kembali

Contoh ini menggambarkan cara anda boleh menggunakan slot dalam aplikasi Vue 3 untuk mencipta sistem komponen penghantaran makanan yang fleksibel. Anda boleh menyesuaikan pengepala, pengaki dan kandungan dengan mudah tanpa mengubah suai komponen utama. Jika anda mempunyai sebarang soalan lanjut atau memerlukan butiran lanjut, jangan ragu untuk bertanya dalam ulasan.

Dengan memanfaatkan slot biasa dan berskop dengan berkesan dalam Vue 3 dengan API Komposisi, anda boleh membina komponen UI yang boleh diguna semula dan boleh disesuaikan dengan sangat baik, mempromosikan kebolehselenggaraan dan organisasi kod dalam aplikasi Vue anda. Anda boleh memilih jenis slot yang sesuai berdasarkan suntikan kandungan khusus anda dan keperluan pemaparan dinamik.
Cara untuk berkembang ialah menyambung.
Selamat mengekod!

Atas ialah kandungan terperinci Memahami Slot dalam API Komposisi Vue ith. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!