Đối tượng Vue $attrs
Ví dụ
Sử dụng đối tượng $attrs
để hướng thuộc tính dự phòng id
tới thẻ <p>
.
<template>
<h3>Tigers</h3>
<img src="/img_tiger_small.jpg" alt="tiger">
<p v-bind="$attrs">Tigers eat meat and not plants, so they are called carnivores.</p>
</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 $attrs
đại diện cho các thuộc tính dự phòng và trình xử lý sự kiện được đặt trên thẻ thành phần.
Chúng tôi sử dụng v-bind="$attrs"
trên phần tử gốc khi chúng tôi muốn phần tử đó kế thừa các thuộc tính dự phòng và trình xử lý sự kiện được đặt trên thẻ thành phần.
Đối tượng $attrs
ở chế độ chỉ đọc.
Thuộc tính dự phòng là các thuộc tính (không phải đạo cụ) được đặt trên thẻ thành phần, nằm trong phần tử gốc của thành phần. Nếu có nhiều hơn một phần tử gốc trong thành phần, chúng tôi sẽ sử dụng đối tượng $attrs
để chỉ định phần tử nào sẽ kế thừa các thuộc tính dự phòng. Tìm hiểu thêm về các thuộc tính dự phòng trong hướng dẫn.
Thêm ví dụ
ví dụ 1
Sử dụng đối tượng $attrs
để hiển thị các thuộc tính dự phòng id
và title
cũng như các giá trị của chúng.
<template>
<h3>Tigers</h3>
<img src="/img_tiger_small.jpg" alt="tiger">
<p v-bind="$attrs">Tigers eat meat and not plants, so they are called carnivores.</p>
<hr>
<p><strong>Below is the content of the $attrs object:</strong></p>
<pre>{{ attrsObject }}</pre>
</template>
<script>
export default {
data() {
return {
attrsObject: null
}
},
mounted() {
console.log(this.$attrs);
this.attrsObject = this.$attrs;
}
}
</script>
<style>
#pink {
background-color: pink;
border-radius: 15px;
padding: 10px;
}
img {
width: 100%;
border-radius: 15px;
}
</style>
Chạy ví dụ »Ví dụ 2
Sử dụng đối tượng $attrs
trên thẻ <img>
để nhận trình xử lý sự kiện từ thành phần chính.
<template>
<h3>Toggle Image Size</h3>
<p>Click the image to toggle the image size.</p>
<img v-bind="$attrs" src="/img_tiger_small.jpg" class="imgSmall">
</template>
<style>
.imgSmall {
width: 60%;
}
.imgLarge {
width: 100%;
}
img {
border-radius: 15px;
cursor: pointer;
}
</style>
Chạy ví dụ »Trang liên quan
Hướng dẫn về Vue: Thuộc tính dự phòng của Vue
Hướng dẫn Vue: Phương thức Vue
Hướng dẫn Vue: Chỉ thị Vue v-bind
Hướng dẫn Vue: Chỉ thị Vue v-on
Tham khảo Vue: Chỉ thị Vue v-bind
Tham khảo Vue: Chỉ thị Vue v-on