Invoke parent/host component method from a child/encapsulated component

[guysagy]

Hi.

I am curious what are the Vue.js recommended way(s) to invoke a method of a parent/host component from a child/encapsulated component.

The ways to do this, in the high level are, afaik :

1. Emit an event from the child, and handle the event in a parent's handler method.
2. Pass a method from parent component to child component, and invoke it from the child (passing it whether (a) as a prop or (b) via inheritance; the idea taken from here)

But ... this article claims that #2 (or at least #2a) "... is something you shouldn't ever be doing in Vue ...".

Any opinions on this?

Thank you!

[LinusBorg]

Passing a function as a prop and passing a function as an event listener achieves pretty much the same.

The difference is mainly this: When the child emits an event, it doesn't care wether there's a listener from the parent. In other words, evetn listeners are always optional. When the child calls a function passed through a prop, the child has to make sure the function actually exists, but on the flip-side, the child can actually work with the function's return value, whereas emitting an event does not return anything in the child

Using events is the default pattern used in Vue. But passing a function as a prop can be useful sometimes, i.e. when you want to work with the function's return value in the child.