How can I call a child function in vuejs?

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')
  }
},

Upvotes: 3

Views: 64

Answers (1)

Abdelillah Aissani
Abdelillah Aissani

Reputation: 3108

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>

Upvotes: 3

Related Questions