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 benull.
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 usingprops/emit orprovide/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
