Vue $parent Object
Example
Using the $parent object in the child component, to change the 'text' data property in the parent component.
<template>
<div>
<h3>Change Text</h3>
<p>Click the button to toggle the text in the PRE tag of the parent component.</p>
<button v-on:click="this.$parent.text='Hello!'">Change text in parent</button>
</div>
</template>
See more examples below.
Definition and Usage
The $parent object represents the Vue instance of the parent component.
If the $parent object is used in the root component, the value of the $parent object will be null.
We can use the $parent object to access the parent instance directly from a child component, 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 $parent object in the child component, to refer to a method in the parent component.
<template>
<div>
<h3>Toggle Color</h3>
<p>Click the button to toggle the color in the P tag of the parent component.</p>
<button v-on:click="this.$parent.toggleColor">Toggle</button>
<p>The 'toggleColor' method is also in the parent component.</p>
</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 $root Object