Add a variable to trigger a function in the parent - Vue

Question

I'm trying to call a function in the parent of a child.

I have created a component I can use on multiple pages in my Vue project, once the function has run I want to call a function on the parent.

I can achieve this by doing this.$parent.getLocations() - and it works.

However as this is a component I need getLocations() to be a variable this could be getPets() or getLunch() for example.

I am passing through 'Location' to the component so I can use that.

I have tried: '${this.$parent}.get${this.type}s()}' (this.type being Location) and this.$parent + ".get" + this.type +" s()

However neither trigger the function.

How do I make `getLocations a variable to run the function?

Ohgodwhy · Accepted Answer · 2019-08-25 19:18:50Z

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.

edited Aug 25, 2019 at 19:18

answered Aug 25, 2019 at 19:11

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

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

Comments

ThibaultV · Accepted Answer · 2019-08-25 19:20:11Z

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.

edited Aug 25, 2019 at 19:20

answered Aug 25, 2019 at 19:14

ThibaultV

811 silver badge10 bronze badges

Collectives™ on Stack Overflow

Add a variable to trigger a function in the parent - Vue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related