Vue expose a method from child component to parent component

Question

Among the approaches below, which do you think is better practice ??

[ 1 ] Using $emit to expose methods from child component to parent component

$emit('updateAPI',  exposeAPI({ childMethod: this.childMethod }))

OR

[ 2 ] Using $refs from parent component to access child component methods

this.$refs.childComponent.childMethod()

You should read the answer over here.Everything is explained really well for understanding. stackoverflow.com/questions/40957008/… — Riddhi
– Riddhi, Commented Apr 12, 2019 at 8:38
Emit - definitely. It completely decouples the parent and child element to increase reusability. — user37309
– user37309, Commented Apr 12, 2019 at 11:59

tony19 · Accepted Answer · 2022-07-16 00:17:03Z

1

About $refs, according to the docs:

"$refs are only populated after the component has been rendered, and they are not reactive. It is only meant as an escape hatch for direct child manipulation - you should avoid accessing $refs from within templates or computed properties."

About callbacks, I have no information about cons and there is a nice example in script section of this component of Quasar Framework, which parent component recieves via emit a function called reset and can dispatch this child function. That's why I think this way is preferable.

edited Jul 16, 2022 at 0:17

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 12, 2019 at 11:57

Matheus Valenza

9191 gold badge5 silver badges11 bronze badges

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

1 Comment

Don Nisnoni Over a year ago

yes.. thank you.. i got it.... BTW so far i'm using `` $refs ``only for call focus();

Collectives™ on Stack Overflow

Vue expose a method from child component to parent component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related