Props

Trong một ứng dụng Vue.js, việc truyền dữ liệu từ component cha đến component con là một phần không thể thiếu của việc xây dựng giao diện người dùng linh hoạt và tái sử dụng. Điều này thường được thực hiện thông qua một khái niệm quen thuộc: props.

Props, viết tắt của "properties", là cách mà các component trong Vue.js truyền dữ liệu từ component cha xuống component con. Bằng cách này, bạn có thể chia nhỏ ứng dụng của mình thành các component nhỏ hơn, mỗi component có nhiệm vụ cụ thể và có khả năng tái sử dụng cao.

Với props, bạn có thể truyền bất kỳ loại dữ liệu nào từ component cha đến component con, string, number, array đến các object phức tạp. Điều này mở ra cánh cửa cho sự tương tác linh hoạt giữa các component, cho phép bạn tạo ra các giao diện động và phong phú.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu chi tiết về props trong Vue.js: cách sử dụng, cách truyền dữ liệu, cách xác thực và sử dụng props một cách hiệu quả nhất. Bằng cách này, bạn sẽ có một hiểu biết sâu sắc về cách tạo ra các component linh hoạt và tái sử dụng trong ứng dụng Vue.js của mình.

Sử dụng Static props

Để sử dụng props trong Vue.js, bạn có thể sử dụng theo cách Static-dynamic (không sử dụng v-bind) và dữ liệu nhận vào của nó luôn luôn là dạng string, các bạn có thể lên trang doc của vue để đọc thêm nhé => Static props

Để thực hiện các bạn làm theo các bước sau:

Khai báo props trong component con: Trong component con (thường là một component con được nhúng trong component cha), bạn cần khai báo props mà bạn muốn nhận. Điều này được thực hiện thông qua thuộc tính props trong phần khai báo của component.
```
export default {
  props: ['name', 'email', 'phoneNumber', 'isFavorite'],
};
```
Truyền props từ component cha: Trong component cha, khi nhúng một component con, bạn có thể truyền dữ liệu cho props mà bạn đã khai báo bằng cách sử dụng các thuộc tính hoặc các biểu thức.
```
<ul>
  <friend-list
    name="s2sontech.com"
    phone-number="01332423423"
    email="s2sontech@gmail.com"
    is-favorite="1"
  >
  </friend-list>
  <friend-list
    name="s2sontech"
    phone-number="01332423423"
    email="abc@gmail.com"
    is-favorite="0"
  >
  </friend-list>
</ul>
```
Trong đoạn mã trên, 'name', 'email', 'phoneNumber', 'isFavorite' là dữ liệu mà component cha muốn truyền cho props <friend-list> </friend-list> của component con.

Sử dụng props trong component con: Trong component con, bạn có thể sử dụng giá trị của props như là một biến cục bộ.

<template>
  <section>
    <li>
      <h2>{{ name }} - {{ isFavorite === '1' ? "Fa" : "" }}</h2>
      <button @click="toggleDetails">Show Details</button>
      <ul v-if="detailsAreVisible">
        <li>
          <strong>Phone:</strong>
          {{ phoneNumber }}
        </li>
        <li>
          <strong>Email:</strong>
          {{ email }}
        </li>
      </ul>
    </li>
  </section>
</template>

Trong đoạn mã trên, 'name', 'email', 'phoneNumber', 'isFavorite' là props mà component con nhận được từ component cha và được sử dụng trong phần template của nó.

Validating Props

Trong Vue.js, bạn có thể xác thực (validate) các props được truyền vào các component để đảm bảo rằng chúng đáp ứng các yêu cầu cụ thể. Xác thực props giúp bạn bảo vệ ứng dụng của mình khỏi việc truyền vào dữ liệu không hợp lệ và tăng tính ổn định của mã.

Dưới đây là một số cách để xác thực props trong Vue.js và các loại xác thực:

Kiểm tra kiểu dữ liệu (Type Checking): Xác thực kiểu dữ liệu của props để đảm bảo rằng chỉ những loại dữ liệu mong muốn được truyền vào. Bạn có thể sử dụng type trong định nghĩa của props.
```
export default {
  props: {
    age: Number,
    name: String,
    isActive: Boolean,
    options: Array,
    user: Object
  }
}
```
Kiểm tra yêu cầu (Required Props): Xác thực các props bắt buộc để đảm bảo rằng chúng được truyền vào component. Điều này được thực hiện bằng cách sử dụng thuộc tính required.
```
export default {
  username: {
    type: String,
    required: true
  }
}
```
Xác thực giá trị (Value Validation): Kiểm tra giá trị của props để đảm bảo rằng chúng đáp ứng các yêu cầu cụ thể. Bạn có thể sử dụng hàm kiểm tra tùy chỉnh để thực hiện xác thực phức tạp hơn.
```
export default {
  props: {
    age: {
      type: Number,
      validator: function(value) {
        return value >= 18 && value <= 100;
      }
    }
  }
}
```

Xác thực từ khóa (Prop Validation with Custom Keywords): Vue.js cung cấp một số từ khóa tùy chỉnh như validator để xác thực props dễ dàng hơn.

export default {
  props: {
  email: {
      type: String,
      validator: function(value) {
        return /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/.test(value);
      }
    }
  }
}

Bằng cách kết hợp các loại xác thực này, bạn có thể đảm bảo rằng dữ liệu được truyền vào các component Vue.js của bạn là hợp lệ và an toàn. Điều này giúp cải thiện tính ổn định và bảo mật của ứng dụng Vue.js của bạn.

Sử dụng Dynamic props

Để thực hiện các bạn làm theo các bước sau:

Khai báo props trong component con: Trong component con (thường là một component con được nhúng trong component cha), bạn cần khai báo props mà bạn muốn nhận. Điều này được thực hiện thông qua thuộc tính props trong phần khai báo của component.

export default {
  props: {
    name: {
      type: Array,
      required: true,
    },
    email: {
      type: String,
      required: true,
    },
    phoneNumber: {
      type: String,
      required: true,
    },
    isFavorite: {
      type: Boolean,
      required: false,
    },
  },
};

Truyền props từ component cha: Trong component cha, khi nhúng một component con, bạn có thể truyền dữ liệu cho props mà bạn đã khai báo bằng cách sử dụng các thuộc tính hoặc các biểu thức.

<ul>
  <friend-list
    v-for="friend in friends"
    :key="friend.id"
    :name="friend.name"
    :phone-number="friend.phone"
    :email="friend.email"
    :is-favorite="false"
  >
  </friend-list>
</ul>

export default {
  data() {
    return {
      friends: [
        {
          id: "manuel",
          name: "Manuel Lorenz",
          phone: "0123 45678 90",
          email: "manuel@localhost.com",
        },
        {
          id: "julie",
          name: "Julie Jones",
          phone: "0987 654421 21",
          email: "julie@localhost.com",
        },
      ],
    };
  },
};

Trong đoạn mã trên, 'name', 'email', 'phoneNumber', 'isFavorite' là dữ liệu mà component cha muốn truyền cho props <friend-list> </friend-list> của component con.

Sử dụng props trong component con: Trong component con, bạn có thể sử dụng giá trị của props như là một biến cục bộ.

<template>
  <section>
    <li>
      <h2>{{ name }} - {{ isFavorite ? "Fa" : "" }}</h2>
      <button @click="toggleDetails">Show Details</button>
      <ul v-if="detailsAreVisible">
        <li>
          <strong>Phone:</strong>
          {{ phoneNumber }}
        </li>
        <li>
          <strong>Email:</strong>
          {{ email }}
        </li>
      </ul>
    </li>
  </section>
</template>

Trong đoạn mã trên, 'name', 'email', 'phoneNumber', 'isFavorite' là props mà component con nhận được từ component cha và được sử dụng trong phần template của nó.

Giống và khác nhau Static vs. Dynamic Props

Sử dụng props trong Vue.js có thể được chia thành hai loại chính: Static Props và Dynamic Props. Dưới đây là sự giống và khác nhau giữa chúng:

Giống nhau:

Truyền dữ liệu từ component cha xuống component con: Cả Static Props và Dynamic Props đều cho phép truyền dữ liệu từ một component cha xuống một component con.
Sử dụng để tái sử dụng component: Cả hai loại props đều giúp tạo ra các component có thể tái sử dụng, giúp tăng tính linh hoạt và tiết kiệm mã.

Khác nhau:

Static Props:
- Dữ liệu được truyền từ component cha xuống component con là cố định và không thay đổi.
- Thích hợp cho các trường hợp mà dữ liệu được truyền xuống là không thay đổi hoặc ít khi thay đổi.
Dynamic Props:
- Dữ liệu được truyền từ component cha xuống component con có thể thay đổi theo thời gian, thậm chí có thể phản ánh các thay đổi trạng thái của ứng dụng.
- Thích hợp cho các trường hợp mà dữ liệu được truyền xuống có thể thay đổi động hoặc tương tác với trạng thái của ứng dụng.

Ví dụ:

Static Props: Truyền một giá trị cố định từ component cha xuống component con để hiển thị thông tin chung về người dùng như tên và địa chỉ.

<user-profile name="John Doe" address="123 Main St" />

Dynamic Props: Truyền một giá trị động từ component cha xuống component con để hiển thị dữ liệu được lấy từ trạng thái của ứng dụng, chẳng hạn như thông tin của người dùng được lấy từ API.

<user-profile :name="user.name" :address="user.address" />

Khi sử dụng Static Props, dữ liệu được truyền là cố định và không thay đổi. Trong khi đó, với Dynamic Props, dữ liệu có thể thay đổi theo thời gian hoặc phản ánh các thay đổi trong trạng thái của ứng dụng. Sự lựa chọn giữa Static và Dynamic Props phụ thuộc vào yêu cầu cụ thể của ứng dụng và cách mà dữ liệu được sử dụng.

Có thể bạn chưa biết

Có hai khái niệm nâng cao mà bạn cũng nên đã nghe qua:

Prop Fallthrough (Chuyển tiếp prop)
Binding All Props on a Component (Gắn kết tất cả props trên một conponent)

Prop Fallthrough (Chuyển tiếp prop)

Bạn có thể thiết lập props (và lắng nghe sự kiện) trên một conponent mà bạn chưa đăng ký bên trong của nó. Ví dụ:

<template>
 <button><slot></slot></button>
</template>
<script></script>

button component này (có thể tồn tại để thiết lập một button với một số kiểu style mặc định) không có props đặc biệt nào sẽ được registered (đăng ký). Tuy nhiên, bạn có thể sử dụng nó như sau:

<base-button type="submit" @click="handleSubmit">Submit</base-button>

Không có props loại "type" hoặc sự kiện "click" tùy chỉnh được định nghĩa hoặc sử dụng trong conponent BaseButton. Tuy nhiên, mã này vẫn hoạt động. Bởi vì Vue có hỗ trợ tích hợp cho prop (và sự kiện) "fallthrough".

Props và sự kiện được thêm vào trên một thẻ conponent tùy chỉnh tự động chuyển đến conponent gốc trong mẫu của conponent đó. Trong ví dụ trên, "type" và "@click" được thêm vào thẻ <button> trong conponent BaseButton.

Bạn có thể truy cập vào các props fallthrough này trên thuộc tính "$attrs" tích hợp sẵn (ví dụ: this.$attrs). Điều này có thể hữu ích để xây dựng các conponent "tiện ích" hoặc hiển thị thuần túy mà bạn không muốn định nghĩa tất cả các props và sự kiện một cách riêng biệt.

Bạn có thể tìm hiểu thêm về behavior này tại đây: https://v3.vuejs.org/guide/component-attrs.html

Thêm một ví dụ nữa cho các bạn hiểu hơn:

Ví dụ, giả sử bạn có một conponent cha là ParentComponent và một conponent con là ChildComponent. conponent cha truyền một số props xuống cho conponent con, nhưng không phải tất cả các props đó đều được sử dụng bởi conponent con. Trong trường hợp này, prop fallthrough cho phép bạn chuyển các props không được sử dụng xuống cho conponent con bên trong mà không cần phải định rõ từng prop một.

Dưới đây là một ví dụ:

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :title="title" :content="content" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      title: 'Title',
      content: 'Content'
    };
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  props: ['title'],
}
</script>

Trong ví dụ này, ParentComponent truyền hai props là "title" và "content" xuống cho ChildComponent, nhưng ChildComponent chỉ sử dụng "title". Nhưng nhờ vào prop fallthrough, ChildComponent vẫn có thể nhận và chuyển tiếp prop content xuống cho conponent con bên trong mà không cần phải định rõ nó trong phần khai báo props. Điều này giúp giảm bớt sự lặp lại và làm cho mã trở nên dễ đọc hơn.

Binding all Props

Còn một tính năng/tính năng tích hợp khác liên quan đến props. Nếu bạn có conponent này:

UserData.vue

<template>
 <h2>{{ firstname }} {{ lastname }}</h2>
</template>
<script>
export default {
 props: ['firstname', 'lastname']
}
</script>

Bạn có thể sử dụng nó như thế này:

<template>
 <user-data :firstname="person.firstname" :lastname="person.lastname">
</user-data>
</template>
<script>
export default {
 data() {
 return {
    person: { firstname: 'Max', lastname: 'Schwarz' }
 };
 }
}
</script>

Nhưng nếu bạn có một đối tượng chứa các props mà bạn muốn đặt làm thuộc tính, bạn cũng có thể rút ngắn mã một chút:

<template>
 <user-data v-bind="person"></user-data>
</template>
<script>
export default {
 data() {
 return {
   person: { firstname: 'Max', lastname: 'Schwarz' }
 };
 }
}
</script>

Điều này hoàn toàn tùy chọn nhưng nó là một tính năng tiện ích nhỏ có thể hữu ích.