VueJS ngày 4 làm thế nào để truyền dữ liệu giữa các Component

     Ở 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

Để đưa 2 component con này vào root thì làm như sau:

Ở bài này thì mình sẽ có cấu trúc folder như sau cả 3 file mới tạo sẽ nằm cùng folder tên là User

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

Sau khi download về mình import vào file ListUser trong hàm data() để coi nó chạy không đã cách làm như sau:

Quay về browser và load lại xem sao

Ngon rồi nó đã lấy được data trog file json

Từ đây chỉ viêt đổ data này ra file ListUser thôi

Và kết quả ta có

Nó đã load ra được data từ file Json và in ra màn hình

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

Đẹp rồi cha đã nhận được dữ liệu từ con truyền lên,

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

Tiếp, nhiệm vụ cuối cùng của bữa nay là từ thằng cha truyền data xuống thằng con nữa là xong

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ị

Ngon rồi giờ chỉ cần qua DetailUser gọi ra là được