Vuejs: Access a Parent Component Method from Child Component

Question

I can't access the parent method from a child component. I did what the official document stated.

Parent template:

<template>
  <v-app>
    <v-sheet height="100vh">
      <v-sheet height="100vh" class="overflow-y-auto">
        <div ref="ComponentDisplay" :is="currentComponent"></div>
      </v-sheet>
      <DrawerComponent></DrawerComponent>
    </v-sheet>
  </v-app>
</template>

<script>
export default {
  name: 'Dashboard',
  data: function () {
    return {
      currentComponent: null
    }
  },
  methods: {
    displayComponent (component) {
      this.currentComponent = component
    }
  }
}
</script>

DrawerComponent:

export default {
  name: 'DrawerComponent',
  methods: {
    exit: function () {
      logout()
    },
    swapComponent: function (component) {
      this.$parent.displayComponent(this.components[component])
    }
  },
  data: () => ({
    drawer: false,
    group: null,
    mini: true,
    components: {}
  }),
  watch: {
    group () {
      this.drawer = false
    }
  }
}
</script>

At the line:

this.$parent.displayComponent(this.components[component])

the below error raises:

TypeError: this.$parent.displayComponent is not a function

You misunderstood the Vue component communication model. Components are fed data via props, and communicate to the outside world only via events. The whole idea of components is encapsulation, that is, a component doesn't know anything besides itself. — connexo
– connexo, Commented Jan 19, 2022 at 18:07
@connexo, Yeah, I've just started using Vue and don't know a lot of things. — A Farmanbar
– A Farmanbar, Commented Jan 19, 2022 at 18:17

Boussadjra Brahim · Accepted Answer · 2022-01-19 18:00:56Z

3

It's not a good practice to use $parent, but instead of that you could use emit to send an event from the child component to run some method in parent one :

in the Child component emit the event with your payload :

    swapComponent: function (component) {
      this.$emit("swap-component",this.components[component])
    }

in parent one:


 <DrawerComponent @swap-component="displayComponent"></DrawerComponent>

and change div to component in


<div ref="ComponentDisplay" :is="currentComponent"></div>

answered Jan 19, 2022 at 18:00

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

A Farmanbar Over a year ago

The error is gone but something else is raised.

[Vue warn]: Error in nextTick: "TypeError: Cannot read properties of null (reading 'componentInstance')" TypeError: Cannot read properties of null (reading 'componentInstance')

Boussadjra Brahim Over a year ago

try out <component ref="ComponentDisplay" :is="currentComponent??'div'"></component> instead of <div ref="ComponentDisplay" :is="currentComponent"></div>

A Farmanbar Over a year ago

I fixed it, I just registered the components globally instead of local components.

Михаил Over a year ago

If you use Vue 3? you may INJECT any Methods from Parent in Child and call it anywhere. (Composition API is preferable)

Boussadjra Brahim Over a year ago

the logic is also valid for composition api just use emit from setup(props,{emit}) instead of this.$emit

Collectives™ on Stack Overflow

Vuejs: Access a Parent Component Method from Child Component

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related