Vue $root Object
Example
Using the $root object in a child component, to change the 'text' data property in the root component of the Vue application.
<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>
See more examples below.
Definition and Usage
The $root object represents the Vue instance of the root component of the total Vue application.
When the $root object is used in the root component, it simply refers to the instance of that component itself.
We can use the $root object to access the root instance directly from a child component, even far down the component tree structure, to call methods, read or manipulate data properties, and so on.
Note: Consider using props/emit or provide/inject for communication between Vue components instead, because code with these explicitly defined ways of communicating is easier to maintain.
More Examples
Example
Using the $root object in a child component, to change the color of a <p> tag in the root component, more than one level up in the component tree structure.
<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>
Related Pages
Vue Tutorial: Vue Props
Vue Tutorial: Vue $emit() Method
Vue Tutorial: Vue Provide/Inject
Vue Reference: Vue $emit() Method
Vue Reference: Vue $parent Object