Scoped Slot

Scoped Slot cho phép component con cung cấp dữ liệu (trong ví dụ này là từng item) cho component cha.
Component cha quyết định cách hiển thị dữ liệu nhận được từ component con.
Scoped Slot cực kỳ hữu ích khi bạn muốn tạo các component linh hoạt và tái sử dụng cao trong Vue.js. Trong trường hợp này, component cha có thể thay đổi cách hiển thị mà không cần thay đổi logic trong component con.

<template>
  <ul>
    <!-- Dùng v-for để lặp qua các item và truyền từng item ra slot -->
    <li v-for="item in items" :key="item.id">
      <!-- Truyền item qua slot dưới dạng một prop -->
      <slot :item="item"></slot> 
    </li>
  </ul>
</template>

<script>
export default {
  name: 'ItemList',
  props: {
    items: Array
  }
};
</script>

<template>
  <div>
    <!-- Sử dụng ItemList và truyền dữ liệu item qua Scoped Slot -->
    <ItemList :items="items">
      <!-- Nhận prop item từ Scoped Slot thông qua slotProps -->
      <template v-slot:default="slotProps">
        <!-- Hiển thị tên item từ slotProps.item -->
        <p>{{ slotProps.item.name }}</p>
      </template>
    </ItemList>
  </div>
</template>

<script>
import ItemList from './components/ItemList.vue';

export default {
  name: 'App',
  components: {
    ItemList
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    };
  }
};
</script>

[
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
]

Kết quả sẽ như sau:

<ul>
  <li>
    <p>Item 1</p>
  </li>
  <li>
    <p>Item 2</p>
  </li>
</ul>

Blog

Nguyen Hoang

Join Our Newsletter. No Spam, Only the good stuff.

Related