Dynamic Components

Dynamic Components trong Vue.js là một cơ chế cho phép bạn chuyển đổi giữa các component khác nhau trong ứng dụng của bạn một cách linh hoạt dựa trên điều kiện hoặc dữ liệu đầu vào. Thay vì việc cứ khai báo mỗi component cụ thể trong template, bạn có thể sử dụng Dynamic Components để render một component dựa trên dữ liệu đầu vào hoặc điều kiện cụ thể.

Dynamic Components cung cấp một cách linh hoạt để quản lý việc hiển thị nội dung của ứng dụng dựa trên các yếu tố như trạng thái ứng dụng, dữ liệu từ người dùng, hoặc các điều kiện khác. Điều này rất hữu ích khi bạn cần thay đổi giao diện của ứng dụng một cách động, chẳng hạn như hiển thị một modal, tab hoặc trang chi tiết dựa trên lựa chọn của người dùng.

Dynamic Components thường được sử dụng trong các tình huống sau:

• Hiển thị các component khác nhau dựa trên điều kiện hoặc dữ liệu.
• Thay đổi component hiển thị khi người dùng thao tác trên ứng dụng (ví dụ: chuyển tab, hiển thị modal).
• Tái sử dụng các component dễ dàng hơn trong ứng dụng của bạn.

Dynamic Components là một tính năng mạnh mẽ trong Vue.js, giúp bạn xây dựng giao diện người dùng linh hoạt và dễ bảo trì.

Dưới đây là một ví dụ cơ bản về cách sử dụng Dynamic Components trong Vue.js:

<template>
  <div>
    <!-- Button để chọn loại thành phần -->
    <button @click="toggleComponent">Toggle Component</button>
    
    <!-- Dynamic Component -->
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from '@/components/ComponentA.vue';
import ComponentB from '@/components/ComponentB.vue';

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  methods: {
    toggleComponent() {
      // Đổi giữa hai thành phần
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    }
  }
};
</script>​

Trong ví dụ này:

• Chúng ta có một nút (button) để chuyển đổi giữa hai loại component.
• Sử dụng component <component> và ràng buộc động (dynamic binding) với thuộc tính is để hiển thị một trong hai component.
• Trong phương thức toggleComponent(), chúng ta đổi giữa hai loại component bằng cách thay đổi giá trị của currentComponent.

Khi bạn nhấn vào nút, Dynamic Component sẽ thay đổi giữa ComponentA và ComponentB dựa trên giá trị của currentComponent.

Dynamic Components là một công cụ mạnh mẽ cho phép bạn xây dựng giao diện người dùng linh hoạt và dễ bảo trì trong Vue.js. Bạn có thể sử dụng chúng để hiển thị các component khác nhau dựa trên các điều kiện như trạng thái ứng dụng, dữ liệu từ người dùng, hoặc các yếu tố khác.

Keeping Dynamic Components Alive

Trong Vue.js, khi bạn sử dụng Dynamic Components để thay đổi giữa các component, mặc định, component trước đó sẽ bị hủy và component mới sẽ được tạo ra. Tuy nhiên, đôi khi bạn muốn giữ cho một hoặc một số component "alive" trong DOM để tránh việc tạo lại chúng mỗi lần chúng ta chuyển đổi giữa các component.

Để làm điều này, Vue.js cung cấp một thuộc tính có tên là keep-alive. Khi bạn bọc Dynamic Components bên trong một thẻ keep-alive, Vue.js sẽ duy trì trạng thái và DOM của các component đã render trước đó, thay vì hủy chúng đi.

Dưới đây là một ví dụ đơn giản về cách sử dụng keep-alive để giữ cho các Dynamic Components "alive":

<template>
  <div>
    <!-- Button để chuyển đổi giữa các thành phần -->
    <button @click="toggleComponent">Toggle Component</button>
    
    <!-- Thẻ keep-alive để giữ cho các Dynamic Components "sống" -->
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
import ComponentA from '@/components/ComponentA.vue';
import ComponentB from '@/components/ComponentB.vue';

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  methods: {
    toggleComponent() {
      // Đổi giữa hai thành phần
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    }
  }
};
</script>​

Trong ví dụ này, keep-alive bao bọc Dynamic Components, và khi chúng ta chuyển đổi giữa các component, DOM của các component trước đó sẽ được duy trì và không bị hủy. Nghĩa là ở ComponentA của tabA bạn có thêm một ô input khi bạn nhập dữ liệu cho input này xong và click qua Tab B và sau đó click tabA thì dữ liệu trong ô input sẽ bị mất. Chính vì thế keep-alive sinh ra để giúp chúng ta giải quyết vấn đề này nó vẫn giữ dữ liệu cho TabA.

Điều này giúp tối ưu hóa hiệu suất và trải nghiệm người dùng trong một số trường hợp, đặc biệt khi chuyển đổi giữa các component có chi phí render cao.