Đối tượng Vue $props
Ví dụ
Sử dụng đối tượng $props
để hiển thị các props nhận được.
<template>
<div>
<h3>Received Props</h3>
<p>This is the $props object:</p>
<pre>{{ this.$props }}</pre>
</div>
</template>
Chạy ví dụ »Xem thêm ví dụ dưới đây.
Định nghĩa và cách sử dụng
Đối tượng $props
đại diện cho các props được khai báo trong thành phần, với các giá trị hiện tại.
Props trong Vue là một cách để truyền các giá trị dưới dạng thuộc tính cho các thành phần con. Xem trang Hướng dẫn Vue để biết Props .
Đối tượng $props
có thể được sử dụng để chuyển props xuống thành phần con tiếp theo (xem Ví dụ 1 bên dưới) hoặc để thiết lập một thuộc tính được tính toán dựa trên prop (Ví dụ 2 bên dưới).
Đối tượng $props
chỉ được đọc.
Thêm ví dụ
ví dụ 1
Sử dụng đối tượng $props
để chuyển props sang thành phần con tiếp theo.
<template>
<div>
<h3>InfoBox.vue</h3>
<p>This is the $props object that is received from App.vue and passed down to the next child component:</p>
<pre>{{ this.$props }}</pre>
<grand-child v-bind="$props" />
</div>
</template>
<script>
export default {
props: [
'bagOwner',
'bagWeight'
]
}
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
margin-top: 20px;
max-width: 370px;
}
</style>
Chạy ví dụ »Ví dụ 2
Sử dụng đối tượng $props
trong thuộc tính được tính toán để tạo thông báo phản hồi dựa trên trọng lượng của túi.
<template>
<div>
<h3>InfoBox.vue</h3>
<p>The $props object is used in a computed value to create a message based on the weight of the bag:</p>
<span>{{ this.bagWeightStatus }}</span>
</div>
</template>
<script>
export default {
props: [
'bagWeight'
],
computed: {
bagWeightStatus() {
if(this.$props.bagWeight>10) {
return 'Puh, this bag is heavy!'
}
else {
return 'This bag is not so heavy.'
}
}
}
}
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
max-width: 350px;
margin-top: 20px;
}
span {
background-color: lightgreen;
padding: 5px 10px;
font-weight: bold;
}
</style>
Chạy ví dụ »Trang liên quan
Hướng dẫn về Vue: Thành phần Vue
Hướng dẫn về Vue: Thuộc tính được tính toán của Vue
Hướng dẫn Vue: Đạo cụ Vue
Hướng dẫn Vue: Chỉ thị Vue v-bind