[Vue.js] Component Communication Patterns

Chào các bạn, Hôm nay mình xin giới thiệu bài viết về mối quan hệ giữa các component trong vue.js. Nếu các bạn đã từng làm qua với vue js thì chắc chắn bạn luôn tổ chức view thành các component khác nhau. Như các bạn thấy trên hình, ta có các component UserNotifications, Flash, ThreadView, SubscribeButton, Replies, Reply, Paginator và NewReply

Vậy để các component giao tiếp với nhau thì có những phương pháp và cách thức nào. Trong bài viết này chúng ta cùng tìm hiểu nhé!

1.Props

• Props cho phép truyền data (bất cứ data type nào) ***từ parent component xuống children component.***,
• Lưu ý: Khi dữ liệu thay đổi ở component cha, các props mà ta khai báo ở các component con cũng tự động update theo.
• Template syntax:

<my-component v-bind:prop="parentValue"></my-component>

Hoặc ngắn gọn hơn

<my-component :prop="parentValue"></my-component>

• Ví dụ:

• Trong hình ta đang có RepliesComponent, đóng vai trò là parent component. Component này đang chứa 2 component con là ReplyComponent và PaginatorComponent đóng vai trò là Children component.

• ReplyComponent ta đang truyền vào một props theo cú pháp (định nghĩa ở trên) là biến reply.
• PaginatorComponent ta đang truyền vào biến dataSet.

Refer code: GitHub

Tóm tắt: Để truyền data từ parent component sang children component ta dùng props nhé các bạn. Hết sức đơn giản đúng không nào