Ở 3 ngày trước mình đã tìm hiểu sơ về VueJS, mình cũng thấy được cốt lõi của VueJS là các Component, vậy làm cách nào các Component này nói chuyện được với nhau cùng nhau tìm hiểu nào.
Thường thì có 4 cách căn bản để truyền data giữa các Component trong VueJS
1. Truyền data từ cha xuống con thông qua pops
2. Truyền data từ con lên cha sài emit event
3. Truyền giữa các component không có quan hệ thông qua Event bus
4. Thông qua store trong VueX.
Tìm hiểu từng cái một nào.
Mình sẽ sữ dụng lại Project của hôm trước nha
1 vs 2. Dùng Pops và Emit để truyền dữ liệu.
Để bắt đầu 1 cách ngọt liệm mình cần tạo các file như sau:
UserDashboard.vue
ListUser.vue
UserDetail.vue
Ví dụ này mình sẽ tạo ra 1 component chính là UserDashboard và 2 component con là ListUser và UserDetail
Tiếp đến nhớ chỉ nó biết đường dẫn đến UserDashboard trong file routes.js và App.vue
Tới đây thì các bạn đã có thể chạy lệnh npm run serve coi kết quả trên màn hình
Khá rỏ ràng mình đã tích hợp được 2 component con vào component cha
Tiếp đến mình cần data để đổ vào con sau đó từ root cha gọi vào component con và hiển thị
bạn có thể lấy data ví dụ ở đây
Từ đây chỉ viêt đổ data này ra file ListUser thôi
Phần quan trọng nhất của đoạn này:
Giờ mình muốn click 1 thằng User bất kì thì phía dưới hiển thị chi tiết của User đó.
Luồng xử lý như sau:
Click vô User ở ListUser -> dữ liệu được truyền lên cho cha UserDashboard -> sau đó dữ liệu được cha gởi gởi con DetailUser
Làm từng bước nha.
1. Quay lại ListUser.vue và thêm sự kiện để mổi khi click vào tên USer dữ liệu sẽ được đưa lên UserDashboard
Giải thích 1 tý chổ này là ở ListUser muốn truyền 1 biến, 1 array, 1 object lên cho cha ta dùng hàm $emit.
Bạn qua lại browser mở vue dev-tool chọn tab event xem khi mình click user name thì event có thay đổi hay không nha
giờ tiếp là ở UserDashboard mình sẽ lấy cái key hồi nãy ở ListUser tạo (userSelected) để mapping dử liệu
Nhắc lại cái nữa từ con muốn gởi data lên cha sài $emit
Từ cha truyền data xuống con mình sài Props nha quý vị