Xin chào các bạn, hôm nay sẽ là một bài viết liên quan về một khái niệm sẽ giúp bạn có thêm cách xử lý các bài toán trong VueJS, đó chính là Dynamic Components. Đây là một khái niệm giúp các bạn xử lý một cách linh động hơn trong quá trình làm việc với dự án là VueJS.
Khái niệm về Dynamic Components trong VueJS
Như cái tên của nó, dynamic components là khả năng chuyển đổi linh hoạt giữa các component với nhau bằng cách sử dụng thành phần <component> kết hợp với thuộc tính is.
Thực hành về Dynamic Components trong VueJS
Bài toán điển hình có thể dễ hiểu nhất là bài toán xử lý các Tab nội dung. Để cho các bạn dễ hiểu thì ở đây mình có tạo một ví dụ đơn giản về nó.
Ở đây mình sử dụng 3 component tương ứng với mỗi tab là HaNoi.vue, HaNam.vue, QuyNhon.vue để hiển thị với mỗi tab tương ứng. Thông thường, nếu chưa biết tới khái niệm dynamic components thì mình sẽ sử dụng v-if hoặc v-show để xử lý ẩn hiện dựa trên tab mình click vào. Tuy nhiên, đối với bài toán có nhiều components ẩn hiện thì việc sử dụng condition dường như là không được tốt cho lắm về mặt logic. Chính vì vậy chúng ta có một giải pháp hay hơn đó là sử dụng dynamic components.
Cách dùng rất đơn giản, bạn chỉ cần sử dụng thành phần là <component> và thuộc tính is để xử lý động components. Hãy tham khảo đoạn code phía dưới:
<script setup>
import { computed, ref } from 'vue';
import HaNam from './components/HaNam.vue';
import QuyNhon from './components/QuyNhon.vue';
import HaNoi from './components/HaNoi.vue';
const tabs = ['Hà Nam', 'Quy Nhơn', 'Hà Nội'];
const activeTab = ref(tabs[0]);
const setActiveTab = (tab) => {
activeTab.value = tab;
};
const components = {
'Hà Nam': HaNam,
'Quy Nhơn': QuyNhon,
'Hà Nội': HaNoi
};
// Xử lý khi activeTab thay đổi thì sẽ thực hiện thay đổi currentComponent
const currentComponent = computed(() => components[activeTab.value]);
</script>
<template>
<div class="main">
<div class="tabs">
<div
v-for="tab in tabs"
:key="tab"
:class="{ active: tab === activeTab }"
@click="setActiveTab(tab)"
>
{{ tab }}
</div>
</div>
<!-- Khai báo để sử dụng dynamic component -->
<component :is="currentComponent" />
</div>
</template>
Ở đây mình đã khai báo thành phần component với giá trị của thuộc tính is là currentComponent. currentComponent sẽ thay đổi khi mình hành xử click vào các tab. Và cuối cùng là chúng ta có kết quả như hình ảnh ở trên mình đã mô tả.