Vue $root 对象
示例
在子组件中使用 $root 对象，以更改 Vue 应用程序根组件中的 'text' 数据属性。
<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>
在下面查看更多示例。
定义和用法
$root 对象表示整个 Vue 应用程序根组件的 Vue 实例。
当 $root 对象在根组件中使用时，它只是指该组件本身的实例。
我们可以使用 $root 对象直接从子组件访问根实例，即使在组件树结构中非常深的位置，也可以调用方法、读取或操作数据属性等。
注意： 考虑使用 属性/发射 或 provide/inject 来进行 Vue 组件之间的通信，因为使用这些明确定义的通信方式编写的代码更容易维护。
更多示例
示例
在子组件中使用 $root 对象，以更改根组件中 <p> 标签的颜色，在组件树结构中向上超过一级。
<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>
相关页面
Vue 教程: Vue 属性
Vue 教程: Vue $emit() 方法
Vue 教程: Vue Provide/Inject
Vue 参考: Vue $emit() 方法
Vue 参考: Vue $parent 对象
