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()

Idiographic

By the way: forceRerender sounds like it's a bad idea. You usually should not have to do something like that. – Gardie

Answer 1

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()

Bloodline

Answer 2

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" />

Featured

Answer 3

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.

Saxen