vue running function in child component from parent component

Question

I've got parent component with a button

<btn @click="validate">Run child method - and validate something!</btn>
<child-component></child-component>

And I have a child component which has a method:

methods:{
   validate () {...}
}

I want to call this method from my parent component. How to do that?

Are there any pros/cons on given solution?

Possible duplicate of Call a Vue JS component method from outside the component — user8120138
– user8120138, Commented Mar 2, 2018 at 20:44
@icecream_hobbit oh, that's right, but my question is much more simpler :) — gileneusz
– gileneusz, Commented Mar 2, 2018 at 20:51
I would recommend passing a bus to the child as a prop, so the child can call its own methods. stackoverflow.com/questions/43256978/… — Roy J
– Roy J, Commented Mar 2, 2018 at 21:23

tony19 · Accepted Answer · 2022-07-15 05:04:28Z

2

You can add the attribute ref and use the ref value to access the component/call its methods.

<child-component ref="child" ></child-component>


this.$refs.child.validate();

https://v2.vuejs.org/v2/guide/components.html#Child-Component-Refs

Despite the existence of props and events, sometimes you might still need to directly access a child component in JavaScript. To achieve this you have to assign a reference ID to the child component using ref. For example:
var parent = new Vue({ el: '#parent' }) // access child component instance var child = parent.$refs.profile

In your case: <btn @click="$refs.child.validate()">Run child method - and validate something!</btn>

edited Jul 15, 2022 at 5:04

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 2, 2018 at 20:36

user8120138

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

Collectives™ on Stack Overflow

vue running function in child component from parent component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related