Đạo cụ thành phần Vue.js

Props được sử dụng để truyền trạng thái cho các thành phần con. Tìm hiểu tất cả về chúng

Xác định một chỗ dựa bên trong thành phần

Đạo cụ là cách các thành phần có thể chấp nhận dữ liệu từ các thành phần bao gồm chúng (thành phần mẹ).

Khi một thành phần mong đợi một hoặc nhiều chỗ dựa, nó phải xác định chúng trongpropsbất động sản:

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

hoặc, trong Thành phần tệp đơn Vue:

<template>
  <p>{{ name }}</p>
</template>

<script> export default { props: [‘name’] } </script>

Chấp nhận nhiều đạo cụ

Bạn có thể có nhiều đạo cụ bằng cách thêm chúng vào mảng:

Vue.component('user-name', {
  props: ['firstName', 'lastName'],
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

Đặt kiểu chống đỡ

Bạn có thể chỉ định loại phần mềm hỗ trợ bằng cách sử dụng một đối tượng thay vì một mảng, sử dụng tên của thuộc tính làm khóa của mỗi thuộc tính và kiểu làm giá trị:

Vue.component('user-name', {
  props: {
    firstName: String,
    lastName: String
  },
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

Các loại hợp lệ bạn có thể sử dụng là:

  • Chuỗi
  • Con số
  • Boolean
  • Mảng
  • Vật
  • Ngày
  • Chức năng
  • Biểu tượng

Khi một loại không khớp, Vue sẽ cảnh báo (ở chế độ phát triển) trong bảng điều khiển bằng một cảnh báo.

Các loại đề xuất có thể được trình bày rõ ràng hơn.

Bạn có thể cho phép nhiều loại giá trị khác nhau:

props: {
  firstName: [String, Number]
}

Đặt chỗ dựa là bắt buộc

Bạn có thể yêu cầu một chỗ dựa là bắt buộc:

props: {
  firstName: {
    type: String,
    required: true
  }
}

Đặt giá trị mặc định của giá đỡ

Bạn có thể chỉ định một giá trị mặc định:

props: {
  firstName: {
    type: String,
    default: 'Unknown person'
  }
}

Đối với các đối tượng:

props: {
  name: {
    type: Object,
    default: {
      firstName: 'Unknown',
      lastName: ''
    }
  }
}

defaultcũng có thể là một hàm trả về một giá trị thích hợp, thay vì là giá trị thực.

Bạn thậm chí có thể xây dựng trình xác thực tùy chỉnh, điều này rất tuyệt vời đối với dữ liệu phức tạp:

props: {
  name: {
    validator: name => {
      return name === 'Flavio' //only allow "Flavios"
    }
  }
}

Chuyển đạo cụ cho thành phần

Bạn chuyển một chỗ dựa cho một thành phần bằng cú pháp

<ComponentName color="white" />

nếu những gì bạn truyền là một giá trị tĩnh.

Nếu đó là thuộc tính dữ liệu, bạn sử dụng

<template>
  <ComponentName :color=color />
</template>

<script> … export default { //… data: function() { return { color: ‘white’ } }, //… } </script>

Bạn có thể sử dụng toán tử bậc ba bên trong giá trị prop để kiểm tra điều kiện trung thực và chuyển một giá trị phụ thuộc vào nó:

<template>
  <ComponentName :colored="color == 'white' ? true : false" />
</template>

<script> … export default { //… data: function() { return { color: ‘white’ } }, //… } </script>

Tải xuống miễn phí của tôiSổ tay Vue


Các hướng dẫn vue khác: