Trong quá trình phát triển ứng dụng Vue.js, việc sử dụng component là một phần quan trọng của quá trình xây dựng giao diện người dùng. Trong Vue.js, có hai loại component chính: Global Components và Local Components.

Global Components:

• Global Components là các component mà bạn đăng ký global và có thể sử dụng trong toàn bộ ứng dụng Vue.js.
• Chúng có thể được đăng ký bên ngoài bất kỳ component nào trong ứng dụng.
• Global Components thích hợp cho các component được sử dụng nhiều lần trong ứng dụng như thanh tiêu đề, chân trang, hoặc các component UI chung.

Local Components:

• Local Components là các component mà bạn định nghĩa trong một component cha và chỉ có thể được sử dụng bên trong component cha đó.
• Chúng chỉ được sử dụng trong phạm vi của một component cha cụ thể.
• Local Components thích hợp cho các component chỉ được sử dụng trong phạm vi cụ thể của một component, giúp tăng tính module và tái sử dụng.

Khi xây dựng ứng dụng Vue.js, việc hiểu và sử dụng đúng loại component phù hợp là quan trọng để tăng tính linh hoạt, module và hiệu suất của ứng dụng. Trong hướng dẫn này, chúng ta sẽ tìm hiểu sâu hơn về cách sử dụng Global và Local Components để xây dựng các ứng dụng Vue.js mạnh mẽ và dễ bảo trì.

Khi nào sử dụng:

• Sử dụng Global Components khi bạn muốn sử dụng một component ở nhiều nơi trong ứng dụng của bạn.
• Sử dụng Local Components khi bạn muốn giữ component chỉ trong phạm vi của một component cha cụ thể.

Ví dụ:

Global Component:

// Đăng ký global component
// main.js hoặc một tập tin khác được import vào main.js
import Vue from 'vue';
import App from './App.vue';

import HeaderComponent from './components/HeaderComponent.vue';

const app = createApp(App);

app.component('app-header', HeaderComponent);

app.mount('#app');​

<!-- Sử dụng global component trong App.vue -->
<template>
  <div id="app">
    <app-header></app-header>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  // Các phần khác của component
}
</script>

<!-- Thành phần cha có tên là ParentComponent.vue -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent // Đăng ký local component
  },
  // Các phần khác của component
}
</script>

<!-- Thành phần con có tên là ChildComponent.vue -->
<template>
  <div>
    <p>This is a local component</p>
  </div>
</template>

<script>
export default {
  // Các phần khác của component
}
</script>