Prop component trong Vuejs là gì?

Trong Vue.js, props là một cơ chế cho phép truyền dữ liệu từ một thành phần cha (parent component) đến một thành phần con (child component). Props là viết tắt của "properties" và chúng được sử dụng để tạo ra các thành phần có thể tái sử dụng và tùy chỉnh được.

Đặc điểm của Props:

• Một chiều: Dữ liệu trong props chỉ có thể truyền từ cha xuống con, không thể truyền từ con lên cha.
• Read-only: Props không nên bị thay đổi bởi thành phần con. Nếu cần thay đổi, thành phần con nên phát ra một sự kiện (emit an event) để thông báo cho thành phần cha.
• Kiểm tra kiểu dữ liệu: Có thể định nghĩa kiểu dữ liệu cho props và Vue.js sẽ cảnh báo nếu dữ liệu truyền vào không khớp với kiểu đã định nghĩa.
• Mặc định và xác thực: Có thể đặt giá trị mặc định cho props và xác thực dữ liệu truyền vào.

Cách sử dụng Props:

1. Khai báo Props: Trong thành phần con, bạn khai báo props mà bạn muốn nhận từ thành phần cha.

   javascript Copy

   // Trong thành phần con
   export default {
     props: {
       // Khai báo props dưới dạng một mảng
       props: ['title', 'likes'],
       // Hoặc dưới dạng một đối tượng với kiểm tra kiểu dữ liệu
       props: {
         title: String,
         likes: Number,
       },
     },
   };

2. Truyền Props: Trong thành phần cha, bạn truyền dữ liệu đến props của thành phần con thông qua các thuộc tính tùy chỉnh trên thẻ của thành phần con.

   html Copy

   <!-- Trong thành phần cha -->
   <template>
     <ChildComponent :title="postTitle" :likes="postLikes" />
   </template>

3. Sử dụng Props: Trong thành phần con, bạn có thể sử dụng giá trị của props giống như sử dụng dữ liệu bình thường trong template hoặc logic của thành phần.

   html Copy

   <!-- Trong thành phần con -->
   <template>
     <h1>{{ title }}</h1>
     <p>Likes: {{ likes }}</p>
   </template>

Props là một phần quan trọng trong việc xây dựng các ứng dụng Vue.js vì chúng giúp quản lý dữ liệu và tương tác giữa các thành phần một cách hiệu quả. Việc sử dụng props giúp tạo ra các thành phần có thể tái sử dụng và dễ dàng bảo trì hơn.