Call parent method in child component using vue.js

Question

I just want to know how to call a parent function from a child component.

I've tried to use the $parent to call the parent method, but I get this error

TypeError: _this.$parent.forceRender is not a function

Here's the parent method that I'm trying to call:

methods: {
      forceRender() {
        this.componentKey += 1
      }
    },

And here's the child component as you can see I'm trying to call the parent method using the $parent:

this.$parent.forceRender()

By the way: forceRerender sounds like it's a bad idea. You usually should not have to do something like that. — Reynicke
– Reynicke, Commented Nov 13, 2020 at 22:09

Amaarockz · Accepted Answer · 2020-11-14 02:12:35Z

13

You can send the functions as a props to the child component jus like follows

<child-component :forceRender="forceRender" />

inside the child component you can received it like this

props: ['forceRender']

and then call it as

this.forceRender()

answered Nov 14, 2020 at 2:12

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

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

Comments

Boussadjra Brahim · Accepted Answer · 2020-11-13 21:09:19Z

4

You should emit an event from child to parent component in order to run a parent method :

in child component:

this.$emit('force-render')

in parent component add @force-render to component tag with forceRender as handler :

<child-component @force-render="forceRender" />

answered Nov 13, 2020 at 21:09

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Comments

Hackcharms · Accepted Answer · 2024-04-27 19:20:40Z

0

I'm not sure but I think you came from React Like one way data binding library, but here in Vuejs you have two way data communication, so instead of doing these work around you can directly tell the parent components by emitting the event and listen the event in parent and react based on your requirements.

answered Apr 27, 2024 at 19:20

Hackcharms

465 bronze badges

Collectives™ on Stack Overflow

Call parent method in child component using vue.js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related