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 对象，在组件树结构的多个级别上更改根组件中 <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>