Slots & Dynamic Components trong Vue.js

Khi xây dựng các Component, đôi khi chúng ta muốn Component cha truyền nội dung động vào Component con hoặc thay đổi Component hiển thị dựa trên trạng thái ứng dụng. Vue cung cấp Slots và Dynamic Components để xử lý những tình huống này.

Mục tiêu bài học:

• Hiểu Slots và cách sử dụng chúng để truyền nội dung động.
• Tìm hiểu Scoped Slots để truyền dữ liệu từ Component con sang Component cha.
• Hiểu Dynamic Components để thay đổi Component hiển thị theo trạng thái ứng dụng.
• Thực hành: Xây dựng giao diện tab động sử dụng Dynamic Components.

Slots & Dynamic

1. Slots – Truyền nội dung từ Component cha

Slots là cơ chế cho phép Component cha chèn nội dung động vào bên trong Component con. Điều này giúp Component con trở nên tái sử dụng hơn.

Ví dụ: Component Card.vue có slot

<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <slot></slot> <!-- Chỗ này sẽ nhận nội dung từ Component cha -->
  </div>
</template>

<script>
export default {
  props: ["title"]
};
</script>

Cách sử dụng trong Component cha:

<Card title="Thông báo">
  <p>Đây là nội dung thông báo quan trọng!</p>
</Card>

Kết quả hiển thị:

Thông báo
Đây là nội dung thông báo quan trọng!

2. Scoped Slots – Truyền dữ liệu từ Component con lên cha

Scoped Slots giúp Component con gửi dữ liệu lên để Component cha sử dụng.

Ví dụ: Component con UserList.vue gửi danh sách user lên Component cha

<template>
  <div>
    <slot :users="userList"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: ["Alice", "Bob", "Charlie"]
    };
  }
};
</script>

Cách sử dụng trong Component cha:

<UserList v-slot="{ users }">
  <ul>
    <li v-for="user in users" :key="user">{{ user }}</li>
  </ul>
</UserList>

Kết quả hiển thị:

- Alice
- Bob
- Charlie

3. Dynamic Components – Thay đổi Component động

Dynamic Components cho phép chúng ta thay đổi Component hiển thị dựa trên trạng thái ứng dụng bằng thuộc tính :is.

Ví dụ: Thay đổi Component hiển thị

<template>
  <div>
    <button @click="currentTab = 'TabA'">Tab A</button>
    <button @click="currentTab = 'TabB'">Tab B</button>
    <component :is="currentTab"></component>
  </div>
</template>

<script>
import TabA from "./TabA.vue";
import TabB from "./TabB.vue";

export default {
  data() {
    return {
      currentTab: "TabA"
    };
  },
  components: {
    TabA,
    TabB
  }
};
</script>

Thực hành: Xây dựng giao diện tab động với Dynamic Components

Yêu cầu:

• Xây dựng giao diện có nhiều tab, mỗi tab hiển thị nội dung khác nhau.
• Khi bấm vào tab, Component tương ứng sẽ hiển thị.
• Sử dụng Dynamic Components để thay đổi nội dung hiển thị.

Bước 1: Cấu trúc thư mục

/project
  /index.html
  /main.js
  /App.vue
  /TabA.vue
  /TabB.vue
  /TabC.vue

Bước 2: Tạo TabA.vue, TabB.vue, TabC.vue

File TabA.vue

<template>
  <div>
    <h2>Tab A</h2>
    <p>Nội dung của Tab A.</p>
  </div>
</template>

File TabB.vue

<template>
  <div>
    <h2>Tab B</h2>
    <p>Nội dung của Tab B.</p>
  </div>
</template>

File TabC.vue

<template>
  <div>
    <h2>Tab C</h2>
    <p>Nội dung của Tab C.</p>
  </div>
</template>

Bước 3: Tạo App.vue để quản lý tab

<template>
  <div>
    <h1>Giao diện Tab động</h1>
    <button v-for="tab in tabs" :key="tab" @click="currentTab = tab">
      {{ tab }}
    </button>
    
    <!-- Sử dụng Dynamic Component -->
    <component :is="currentTab"></component>
  </div>
</template>

<script>
import TabA from "./TabA.vue";
import TabB from "./TabB.vue";
import TabC from "./TabC.vue";

export default {
  data() {
    return {
      currentTab: "TabA",
      tabs: ["TabA", "TabB", "TabC"]
    };
  },
  components: {
    TabA,
    TabB,
    TabC
  }
};
</script>

Bước 4: Cấu hình main.js

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

Kết luận

Tóm tắt kiến thức quan trọng:

• Slots giúp Component cha chèn nội dung động vào Component con.
• Scoped Slots giúp Component con truyền dữ liệu lên cha.
• Dynamic Components giúp thay đổi Component hiển thị một cách linh hoạt.
• Thực hành: Xây dựng giao diện tab động bằng Dynamic Components.