时间戳

首页 > 解决方案 > 如何在 vuejs 中调用子函数？

vue.js - 如何在 vuejs 中调用子函数？

问题描述

我需要从父级调用子函数，但我不知道如何，

这是父组件调用子组件

<QuestionC @childfunction></QuestionC>

这是一个子组件

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

标签： vue.jsvue-component

解决方案

您可以使用它的ref... 来调用它，如下所示：

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>

推荐阅读