CODEWITHSUNDEEP
vue.js
gileneusz
gileneusz

Reputation: 1485

vue running function in child component from parent component

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?

Upvotes: 0

Views: 411

Answers (1)

user8120138
user8120138

Reputation:

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>

Upvotes: 2

Related Questions