Đăng ký component ​

Trang này giả định bạn đã đọc Cơ bản về Thành phần. Hãy đọc trước nếu bạn mới làm quen với các thành phần.

Một thành phần Vue cần được "đăng ký" để Vue biết nó nằm ở đâu khi nó được gặp trong một mẫu. Có hai cách để đăng ký thành phần: toàn cầu và cục bộ.

Đăng ký Toàn cầu ​

Chúng ta có thể làm cho các thành phần có sẵn toàn cầu trong ứng dụng Vue hiện tại bằng cách sử dụng phương thức .component():

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // tên đã đăng ký
  'MyComponent',
  // cài đặt
  {
    /* ... */
  }
)

Nếu sử dụng SFCs, bạn sẽ đăng ký các tệp .vue được nhập:

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

Phương thức .component() có thể được nối tiếp:

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

Các thành phần đã đăng ký toàn cầu có thể được sử dụng trong mẫu của bất kỳ thành phần nào trong ứng dụng này:

<!-- điều này sẽ hoạt động trong bất kỳ thành phần nào trong ứng dụng -->
<ComponentA/>
<ComponentB/>
<ComponentC/>

Điều này thậm chí còn áp dụng cho tất cả các thành phần con, có nghĩa là tất cả ba thành phần này cũng sẽ có sẵn bên trong lẫn nhau.

Đăng ký Cục bộ ​

Mặc dù tiện lợi, đăng ký toàn cầu có một số nhược điểm:

1. Đăng ký toàn cầu ngăn hệ thống xây dựng loại bỏ các thành phần không sử dụng (còn được gọi là "tree-shaking"). Nếu bạn đăng ký toàn cầu một thành phần nhưng cuối cùng không sử dụng nó ở bất kỳ đâu trong ứng dụng của bạn, nó vẫn sẽ được bao gồm trong bản cuối cùng.

2. Đăng ký toàn cầu làm giảm rõ ràng mối quan hệ phụ thuộc trong các ứng dụng lớn. Nó làm cho việc xác định vị trí thực hiện của một thành phần con từ một thành phần cha sử dụng nó trở nên khó khăn. Điều này có thể ảnh hưởng đến tính bảo trì lâu dài tương tự như việc sử dụng quá nhiều biến toàn cầu.

Đăng ký cục bộ giới hạn phạm vi sẵn có của các thành phần đã đăng ký chỉ cho thành phần hiện tại. Nó làm cho mối quan hệ phụ thuộc trở nên rõ ràng hơn, và thân thiện với tree-shaking hơn.

<script setup>
import ComponentA from './ComponentA.vue'
</script>

<template>
  <ComponentA />
</template>

import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}

<script>
import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
}
</script>

<template>
  <ComponentA />
</template>

Đối với mỗi thuộc tính trong đối tượng components, khóa sẽ là tên đã đăng ký của thành phần, trong khi giá trị sẽ chứa cài đặt của thành phần. Ví dụ trên đang sử dụng rút gọn thuộc tính ES2015 và tương đương với:

export default {
  components: {
    ComponentA: ComponentA
  }
  // ...
}

Lưu ý rằng các thành phần được đăng ký cục bộ không có sẵn trong các thành phần con. Trong trường hợp này, ComponentA sẽ chỉ được đưa ra sử dụng cho thành phần hiện tại, không phải cho bất kỳ thành phần con hoặc thành phần con cháu nào khác.

Điều Chỉnh Tên Thành phần ​

Trong toàn bộ hướng dẫn, chúng tôi sử dụng tên PascalCase khi đăng ký các thành phần. Điều này là vì:

1. Tên PascalCase là các đ

ịnh danh JavaScript hợp lệ. Điều này làm cho việc nhập và đăng ký các thành phần trong JavaScript trở nên dễ dàng hơn. Nó cũng giúp các IDE có tính năng tự động hoàn thành.

2. <PascalCase /> làm cho nó trở nên rõ ràng hơn đây là một thành phần Vue thay vì một phần tử HTML nguyên thủy trong các mẫu. Nó cũng làm cho thành phần Vue khác biệt với các phần tử tùy chỉnh (phần tử web).

Đây là phong cách được khuyến nghị khi làm việc với SFC hoặc các mẫu chuỗi. Tuy nhiên, như đã thảo luận trong Lưu ý khi Phân tích Mẫu Trực tiếp trong DOM, các thẻ PascalCase không thể sử dụng được trong các mẫu trực tiếp trong DOM.

May mắn thay, Vue hỗ trợ chuyển đổi các thẻ viết thường thành các thành phần được đăng ký bằng PascalCase. Điều này có nghĩa là một thành phần được đăng ký với tên MyComponent có thể được tham chiếu trong mẫu thông qua cả <MyComponent> và <my-component>. Điều này cho phép chúng ta sử dụng mã đăng ký thành phần JavaScript giống nhau bất kể nguồn mẫu nào.