Chào các bạn,
Nay mình qua 1 mốc mới của VueJS nhé 😀 Là về component cho VueJS.
Với VueJS, ta sẽ quản lý code thông qua các component. Là có nghĩa trong 1 vue instance, ta có thể có nhiều component khác nhau bên trong . Cũng như các component cũng có thể chứa nhiều component chung.
Với cách quản lý code mà VueJS cung cấp cho chúng ta, ta có thể tách code và giảm thiểu long-code nhất trong file của chúng ta 😀 Và từ đó ta cũng có thể tạo ra những re-usable component (sẽ nói sau ở bài sau :D)
Component có quan hệ như sau, cụ thể là tree of a nested components:
- Quan hệ cha con (cho dễ như DB thì 1-n)
- Ngoài ra component riêng biệt cũng có quan hệ 1-1 với nhau, thủ thuật này mình sẽ nói sau 😀
Chúng ta đi vào tiết mục chính nhé :D.
1/ Tạo ra một component của VueJS
Với browser component, ta sẽ tạo ra 1 component Vue như sau:
Vue.component("test-component", {
template: "<div><p>{{text}}</p></div>",
methods: {
},
data: function() {
return {
text: "Hello World from a new Component"
}
},
created: function() {
console.log("CREATED COMPONENT - NOT RENDER YET");
}
});Về tên component, các bạn có thể đặt theo kebab-case (a-b-c…) hoặc Pascal-case (MyTestComponent), đặt 1 cách có thể sử dụng cho cả 2 😀
Lưu ý: Khai báo data trong component, các bạn phải tạo ra 1 function và return về 1 object như trên (điều bắt buộc của VueJS), ta nên follow theo 😀
Trong đó, các properties cơ bản thì nó sẽ tương tự như Vue instance, các bạn có thể tham khảo lại các bài trước của mình, ở đây ta sẽ quan tâm tới property template
Ta sẽ bỏ html template của component của bạn vào trong đó. Ví dụ như sau:
<div>
<p>Hello</p>
</div>Lưu ý: chỉ có thể có 1 root element, nên các bạn lưu ý mọi tất cả element riêng, ta fải bỏ vào chung 1 root, nếu ko Vue sẽ báo lỗi 😀
// Không nên
<div>...</div>
<div>...</div>
// Nên
<div>...
<p>...</p>
....
</div>Và trong template, các bạn cứ thực hiện xài các Vue directives, data,… như bình thường :D, nó sẽ hiện ra khi ra apply component này.
2/ Khai báo và sử dụng component
Như các bên trên, là các bạn đang register component globally, có nghĩa là có thể sử dụng component này ở mọi component.
Là các bạn có thể sử dụng như sau:
//html
<div id="app">
<test-component></test-component>
</div>
// js
new Vue({
el: "#app",
});Tuy nhiên nếu bạn muốn những component nhất định mới xài dc component đó, các bạn có thể register privately như sau:
var MyComponentA = { /** YOUR COMPONENT PROPERTIES **/ };
var MyComponentB = { /** YOUR COMPONENT PROPERTIES **/ };
var MyComponentC = { /** YOUR COMPONENT PROPERTIES **/ };Tạo ra các object component của bạn.
components: {
'my-component-a': MyComponentA,
'my-component-b': MyComponentB,
...
}Register vào component privately thông qua property components , và chỉ có component nào đã register thì nó mới sử dụng được 😀
3/ Truyền data vào component
Đây là điều hoàn toàn tất yếu cơ bản, ta luôn muốn truyền data từ thằng cha qua thằng con, để nó thực hiện ABC XYZ gì đó 😀 Vậy nên để truyền data xuống thằng con được, ta sẽ khai báo property prop trong component con như sau:
// cách 1
{
prop: ['text', 'number'],
...
}
// cách 2:
{
prop: {
text: {
type: String,
default: "No string",
},
number: {
type: Number,
default: 0
}
}
}Và từ component cha, ta có thể truyền data vào như sau:
<div id="app">
<test-component text="Hello World" :number="numberTest"></test-component>
</div>Ta có thể truyền theo 2 kiểu là data binding và normal như ở trên 😀
Và với component con, ta có thể sử dụng 2 data là text và number (this.text,…) thoải mái trong component con đó 😀
Lưu ý: khi khởi tạo data, nên tránh trùng với prop nhé 😀
4/ Kết luận về component cho VueJS
Với một cách tạo component dễ dàng mà VueJS đã provide, ta có thể quản lý cũng như viết code thoải mái cũng như dễ dàng quản lý, maintain hơn 😀
Ở bài sau mình sẽ viết về cách tạo Re-usable component và data flow giữa các component trong VueJS nhé 😀
Cám ơn các bạn đã quan tâm theo dõi!
# component cho VueJS
