[Vuejs]-Add a variable to trigger a function in the parent – Vue

by

2👍

✅

It’s an anti pattern. The child of the parent should not know about the parent’s function.

In the child:

this.$emit('needs-locations', { type: this.type })

In the parent:

<child @needs-locations="getLocations" :locations="locations">

getLocations(type) {
  api.then((locations) => this.locations = locations)
}

This will give you bidirectional communication without dependency.

👤Ohgodwhy

1👍

First you emit an event from the child to the parent, and you pass a type to it.

this.$emit('runFunction', type)

Then handle the event:

<child-component @runFunction="handleRunFunction"/>

On the parent runFunction would look like this:

handleRunFunction(type) {
        switch (type) {
            case 'Location':
                getLocations();
            case 'Pets':
                getPets();
            default:
                break;
        }
    }

A normal if-else statement works equally well.

👤ThibaultV

Leave a comment