Đối tượng Vue $root
Ví dụ
Sử dụng đối tượng $root
trong thành phần con để thay đổi thuộc tính dữ liệu 'text' trong thành phần gốc của ứng dụng Vue.
<template>
<div>
<h3>Change Text</h3>
<p>Click the button to toggle the text in the PRE tag of the root component.</p>
<button v-on:click="this.$root.text='Hello!'">Change text in root</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 $root
đại diện cho phiên bản Vue của thành phần gốc của toàn bộ ứng dụng Vue.
Khi đối tượng $root
được sử dụng trong thành phần gốc, nó chỉ đơn giản đề cập đến phiên bản của chính thành phần đó.
Chúng ta có thể sử dụng đối tượng $root
để truy cập trực tiếp vào phiên bản gốc từ một thành phần con, thậm chí từ cấu trúc cây thành phần, để 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 $root
trong thành phần con, để thay đổi màu của thẻ <p>
trong thành phần gốc, tăng hơn một cấp trong cấu trúc cây thành phần.
<template>
<div>
<h4>Grand Child Component</h4>
<p>Click the button to toggle the color of the P tag in the root component.</p>
<button v-on:click="this.$root.color='lightgreen'">Change color in root</button>
</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 chiếu Vue: Đối tượng Vue $parent