Cách sử dụng đạo cụ để tạo các thành phần Vue tốt hơn

Một trong những tính năng chính của Vue là kiến ​​trúc mô-đun, cho phép bạn xây dựng các ứng dụng web bằng cách kết hợp các thành phần nhỏ, có thể tái sử dụng. Điều này cho phép bạn cập nhật và bảo trì ứng dụng web của mình một cách dễ dàng.

Mỗi thành phần trong Vue có thể có tập hợp dữ liệu và phương thức riêng mà bạn có thể chuyển xuống các thành phần con của nó bằng các đạo cụ. Tại đây, bạn sẽ học cách sử dụng props trong Vue để truyền dữ liệu từ component cha sang component con.

Đạo cụ trong Vue là gì?

Props—viết tắt của “properties”—là các thuộc tính tùy chỉnh trong Vue mà một thành phần cha có thể truyền lại cho các thành phần con của nó.

Trong Vue, các component cha truyền props cho các component con theo một luồng đơn hướng. Điều này có nghĩa là các component con chỉ có thể đọc và sử dụng các props đã truyền này chứ không thể sửa đổi dữ liệu.

Sử dụng đạo cụ cho phép bạn tạo các thành phần có thể tái sử dụng mà bạn có thể áp dụng trong toàn bộ ứng dụng của mình. Đạo cụ giúp bạn tiết kiệm thời gian và công sức vì bạn có thể sử dụng lại các thành phần thay vì tạo các thành phần mới từ đầu.

Cách chuyển đạo cụ trong Vue

Truyền đạo cụ trong Vue rất đơn giản và khác với cách bạn truyền đạo cụ trong React. Để chuyển một props từ component cha sang component con của nó trong Vue, hãy sử dụng tùy chọn props trong script của component con.

Đây là một ví dụ:

 
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <p>{{ emailAddress }}</p>
  </div>
</template>
<script>
export default {
  name: "ChildComponent",
  props: ["title", "message", "emailAddress"],
};
</script>
 

Khối mã trên mô tả một thành phần con Vue sử dụng các đạo cụ để truyền dữ liệu từ thành phần cha. Thành phần này bao gồm ba phần tử HTML hiển thị tiêu đề, tin nhắnVà địa chỉ email thuộc tính với phép nội suy.

Các đạo cụ tùy chọn trong thành phần con nhận một mảng các thuộc tính. Mảng này xác định các thuộc tính mà thành phần con chấp nhận từ thành phần cha.

Đây là một ví dụ về thành phần cha Vue truyền dữ liệu cho thành phần con với đạo cụ:

 
<template>
  <div>
    <child-component
      title="Hello World"
      message="This is a message from the parent component"
      emailAddress="user0000@example.com"
    />
  </div>
</template>
<script>
import ChildComponent from "./components/ChildComponent.vue";
export default {
  name: "ParentComponent",
  components: {
    ChildComponent,
  },
};
</script>
 

Thành phần cha trong khối mã trên chuyển ba đạo cụ cho thành phần con. Khối mã chuyển các giá trị tĩnh tới tiêu đề, tin nhắnVà địa chỉ email đạo cụ.

Bạn cũng có thể chuyển các giá trị động cho các đạo cụ của mình bằng liên kết v chỉ thị. liên kết v là một lệnh được sử dụng trong Vue để liên kết dữ liệu với các thuộc tính HTML.

Đây là một ví dụ về thành phần cha Vue sử dụng liên kết v chỉ thị để truyền các giá trị động cho các đạo cụ:

 
<template>
  <div>
    <child-component
      :title= "title"
      :message= "message"
      :emailAddress= "emailAddress"
    />
  </div>
</template>
<script>
import ChildComponent from "./components/ChildComponent.vue";
export default {
  name: "ParentComponent",
  components: {
    ChildComponent,
  },
  data() {
    return {
      title: "Welcome dear",
      message: "How are you",
      emailAddress: "user0000@gmail.com",
    };
  },
};
</script>
 

Sử dụng liên kết v truyền dữ liệu cho thành phần con, bạn có thể cập nhật các giá trị của props dựa trên trạng thái của thành phần cha. Ví dụ, bằng cách thay đổi tiêu đề thuộc tính dữ liệu trong thành phần cha mẹ, thuộc tính tiêu đề prop được truyền cho thành phần con cũng sẽ được cập nhật.

Phương pháp xác định các đạo cụ dưới dạng một chuỗi các chuỗi này là một mẫu tốc ký. Mỗi chuỗi trong mảng đại diện cho một chỗ dựa. Phương pháp này là lý tưởng khi tất cả các đạo cụ trong mảng có cùng kiểu dữ liệu JavaScript.

Xác định Props như một đối tượng trong Vue

Xác định props là một đối tượng JavaScript thay vì một mảng cho phép tùy chỉnh tốt hơn cho từng prop. Việc xác định props như một đối tượng trong một thành phần sẽ cho phép bạn chỉ định loại dữ liệu dự kiến ​​và giá trị mặc định của từng props.

Ngoài ra, bạn có thể đánh dấu các prop cụ thể là bắt buộc, kích hoạt cảnh báo nếu prop không được cung cấp khi thành phần đang được sử dụng. Xác định props như một đối tượng cung cấp một số lợi thế so với xác định props như một mảng, bao gồm:

1. Việc xác định loại dữ liệu dự kiến ​​và giá trị mặc định cho mỗi chỗ dựa giúp bạn và nhóm nhà phát triển của bạn hiểu chính xác cách sử dụng thành phần đó dễ dàng hơn.
2. Bằng cách đánh dấu các props theo yêu cầu, bạn có thể phát hiện lỗi sớm trong quá trình phát triển và cung cấp thêm thông tin cho nhóm nhà phát triển.

Đây là một ví dụ về cách xác định props như một đối tượng trong thành phần Vue.js:

 <template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <p>{{ emailAddress }}</p>
  </div>
</template>
<script>
export default {
  name: "ChildComponent",
  props: {
    title: {
      type: String,
      default: "Default Title",
    },
    message: {
      type: String,
      default: "Default Message",
    },
    emailAddress: {
      type: String,
      required: true,
    },
  },
};
</script>
 

Khối mã này là một ví dụ về thành phần Vue.js sử dụng các đạo cụ để truyền dữ liệu từ thành phần chính sang thành phần con. Khối mã định nghĩa các đạo cụ này là các đối tượng có loại và giá trị mặc định hoặc cờ bắt buộc.

Khối mã xác định tiêu đề Và tin nhắn đạo cụ như chuỗi với một mặc định giá trị và địa chỉ email chống đỡ như một yêu cầu sợi dây.

Chọn phương pháp tốt nhất phù hợp với ứng dụng Vue của bạn

Bạn đã học cách xác định props dưới dạng mảng và đối tượng. Tùy chọn của bạn phải phù hợp với nhu cầu cụ thể của ứng dụng của bạn.

Vue chứng tỏ mình là một khung JavaScript rất linh hoạt. Nó cung cấp rất nhiều phương pháp và tùy chọn để đạt được cùng một mục tiêu với những lợi thế khác nhau cho bất kỳ tùy chọn hoặc phương pháp nào bạn chọn để làm việc.