Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Vue Tutorial

Vue HOME Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue Why, How and Setup Vue First SFC Page Vue Components Vue Props Vue v-for Components Vue $emit() Vue Fallthrough Attributes Vue Scoped Styling Vue Local Components Vue Slots Vue v-slot Vue Scoped Slots Vue Dynamic Components Vue Teleport Vue HTTP Request Vue Template Refs Vue Lifecycle Hooks Vue Provide/Inject Vue Routing Vue Form Inputs Vue Animations Vue Animations with v-for Vue Build Vue Composition API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue Examples

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

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>
Run Example »

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>
Run Example »

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