Chào mừng đến với Cafedev! Trong hướng dẫn này, chúng ta sẽ khám phá về cách đăng ký các thành phần trong Vue.js. Việc đăng ký thành phần là bước quan trọng giúp Vue biết nơi tìm hiểu hiện thực của thành phần khi gặp trong một template. Có hai cách để đăng ký các thành phần: toàn cầu và cục bộ. Hãy cùng tìm hiểu chi tiết hơn về cả hai cách này và cách chúng ảnh hưởng đến quá trình phát triển ứng dụng Vue của bạn.
Trang này cho rằng bạn đã đọc hiểu 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ơi định vị triển khai của nó khi nó được gặp trong một template. Có hai cách để đăng ký thành phần: toàn cầu và cục bộ.
Nội dung chính
1. Đă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(
// the registered name
'MyComponent',
// the implementation
{
/* ... */
}
)Nếu sử dụng SFCs, bạn sẽ đăng ký các tệp .vue và import file đó vào nơi cần dùng:
import MyComponent from './App.vue'
app.component('MyComponent', MyComponent)Phương thức .component() có thể được nối chuỗi:
app
.component('ComponentA', ComponentA)
.component('ComponentB', ComponentB)
.component('ComponentC', ComponentC)Các thành phần được đăng ký toàn cầu có thể được sử dụng trong template của bất kỳ thành phần nào trong ứng dụng này:
<!-- this will work in any component inside the app -->
<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 nhau.
2. Đăng Ký Cục Bộ
Mặc dù tiện lợi, việc đăng ký toàn cầu có một số hạn chế:
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ý một thành phần toàn cầu 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 đóng gói cho người dùng.
2. Đăng ký toàn cầu làm cho mối quan hệ phụ thuộc ít rõ ràng hơn trong các ứng dụng lớn. Nó làm cho việc định vị triển khai 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 hơn. Điều này có thể ảnh hưởng đến tính bảo trì dài hạn 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 sự sẵn có của các thành phần đã đăng ký cho thành phần hiện tại. Nó làm cho mối quan hệ phụ thuộc rõ ràng hơn và thân thiện hơn với tree-shaking.
Code theo 2 kiểu options và composition:
Khi sử dụng SFC với <script setup>, các thành phần được nhập vào có thể được sử dụng cục bộ mà không cần đăng ký:
<script setup>
import ComponentA from './ComponentA.vue'
</script>
<template>
<ComponentA />
</template>Trong trường hợp không sử dụng <script setup>, bạn sẽ cần sử dụng tùy chọn components:
import ComponentA from './ComponentA.js'
export default {
components: {
ComponentA
},
setup() {
// ...
}
}Việc đăng ký cục bộ được thực hiện bằng cách sử dụng tùy chọn components:
<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, key sẽ là tên đã đăng ký của thành phần, trong khi giá trị sẽ chứa triển khai của thành phần. Ví dụ trên đang sử dụng cú pháp 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ó sẵn cho thành phần hiện tại, không phải cho bất kỳ thành phần con hoặc dưới cấp nào.
3. Cách đặt 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. Các tên PascalCase là các định danh JavaScript hợp lệ. Điều này làm cho việc import và đăng ký các thành phần trong JavaScript dễ dàng hơn. Nó cũng giúp các IDE với tính năng tự động hoàn thành mã tốt hơn cho developer.
2. <PascalCase /> làm cho nó trở nên rõ ràng hơn, rằng đây là một thành phần Vue thay vì một phần tử HTML cố định trong các mẫu. Nó cũng phân biệt các thành phần Vue với các phần tử tùy chỉnh (các thành phần web).
Đây là phong cách được khuyến nghị khi làm việc với SFC hoặc mẫu chuỗi. Tuy nhiên, như đã thảo luận trong Cảnh Báo Phân Tích Mẫu trong DOM, các thẻ PascalCase không thể sử dụng trong các mẫu trong DOM.
May mắn thay, Vue hỗ trợ giải quyết các thẻ kebab-case thành các thành phần đã được đăng ký bằng cách sử dụ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> and <my-component> . Điều này cho phép chúng tôi sử dụng cùng mã đăng ký thành phần JavaScript mà không phụ thuộc vào nguồn mẫu.
Như vậy, chúng ta đã khám phá sâu hơn về cách đăng ký các thành phần trong Vue.js thông qua hướng dẫn này. Việc hiểu rõ về quy trình đăng ký cả toàn cầu và cục bộ sẽ giúp bạn tối ưu hóa quá trình phát triển ứng dụng Vue của mình trên mọi phương diện. Hãy áp dụng những kiến thức đã học vào dự án của bạn và tiếp tục khám phá thêm về sức mạnh của Vuejs trên Cafedev!
Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Vuejs từ cơ bản tới nâng cao
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
