How can I call a child function in vuejs?

Question

I need to call a child function from the parent but I don't know how,

This is parent component calling to child component

<QuestionC @childfunction></QuestionC>

This is a child component

methods: {
  childfunction: function () {
    alert('hello')
  }
},

You can access all child components by this.$root.$children, but I think it's better to using ref to get the target component that you want. — JimmyLv
– JimmyLv, Commented Jul 29, 2019 at 11:33

Abdelillah Aissani · Accepted Answer · 2019-07-29 11:18:23Z

3

You can call it using its ref ... like this:

Vue.component('child', {
  template: ' ',
  methods: {
    childfunction: function() {
      alert('hello')
    }
  }
})

new Vue({
  el: '#app',
  methods: {
    callChild() {
      this.$refs.child.childfunction();
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <child ref="child"></child>
  <button @click="callChild()">CallChild</button>
</div>

answered Jul 29, 2019 at 11:18

Abdelillah Aissani

3,1082 gold badges12 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

How can I call a child function in vuejs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related