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 对象时，它仅引用该组件本身的实例。
我们可以使用 $root 对象直接从子组件（甚至是组件树结构的最深处）访问 root 根实例，以调用方法、读取或操作 数据属性等。
注意:考虑使用 props/emit 或 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 Props 选项
Vue 教程:Vue $emit() 方法
Vue 教程:Vue Provide/Inject
Vue 参考:Vue $emit() 方法
Vue 参考:Vue $parent 对象
