Đối tượng Vue $parent
Ví dụ
Sử dụng đối tượng $parent
trong thành phần con để thay đổi thuộc tính dữ liệu 'text' trong thành phần cha.
<template>
<div>
<h3>Change Text</h3>
<p>Click the button to toggle the text in the PRE tag of the parent component.</p>
<button v-on:click="this.$parent.text='Hello!'">Change text in parent</button>
</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 $parent
đại diện cho phiên bản Vue của thành phần cha.
Nếu đối tượng $parent
được sử dụng trong thành phần gốc, giá trị của đối tượng $parent
sẽ là null
.
Chúng ta có thể sử dụng đối tượng $parent
để truy cập trực tiếp vào thể hiện cha từ một thành phần con, để gọi các phương thức, đọc hoặc thao tác các thuộc tính dữ liệu, v.v.
Lưu ý: Thay vào đó, hãy cân nhắc sử dụng đạo cụ / phát ra hoặc cung cấp / tiêm để liên lạc giữa các thành phần Vue, vì mã với các cách giao tiếp được xác định rõ ràng này sẽ dễ bảo trì hơn.
Thêm ví dụ
Ví dụ
Sử dụng đối tượng $parent
trong thành phần con để tham chiếu đến một phương thức trong thành phần cha.
<template>
<div>
<h3>Toggle Color</h3>
<p>Click the button to toggle the color in the P tag of the parent component.</p>
<button v-on:click="this.$parent.toggleColor">Toggle</button>
<p>The 'toggleColor' method is also in the parent component.</p>
</div>
</template>
Chạy ví dụ »Trang liên quan
Hướng dẫn Vue: Đạo cụ Vue
Hướng dẫn về Vue: Phương thức Vue $emit()
Hướng dẫn về Vue: Cung cấp/Tiêm Vue
Tham khảo Vue: Phương thức Vue $emit()
Tham khảo Vue: Đối tượng Vue $root