Vue $root 对象


示例

使用$root子组件中的对象,以更改 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>
运行示例 »

请参阅下面的更多示例。


定义和用法

这个$rootobject 表示整个 Vue 应用程序的根组件的 Vue 实例。

当。。。的时候$rootobject 在根组件中使用,它仅引用该组件本身的实例。

我们可以使用$root对象直接从子组件(甚至是组件树结构的最深处)访问根实例,以调用方法、读取或操作数据属性等。

笔记:考虑使用道具/发射或者提供/注入相反,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 提供/注入

Vue参考:Vue $emit() 方法

Vue参考:Vue $parent 对象