Phát hiện chặn quảng cáo

Xin lỗi bạn, mình có đặt quảng cáo để lấy kinh phí duy trì trang, nếu bạn không thấy phiền có thể tắt chức năng chặn quảng cáo và tải lại trang.

Tiếp tục xem
Tải lại

[VueJS]Bạn đã biết về Dynamic Components trong VueJS

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ả.

Về Đặng Thắng

Chào mọi người, mình là Thắng. Sở thích của mình là lập trình và chia sẻ mọi thứ mình học được cho tất cả mọi người. Rất mong mọi người ủng hộ Blog của mình.

Đề xuất

[VueJS] Tối ưu hiệu năng VueJS với Async Components

Xin chào các bạn, hôm nay sẽ là một bài viết liên quan tới VueJS …

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *