Vue 调用子组件方法

<div id="app">
  <child ref="child"></child>
  <button @click="callChildMethod">
    callChildMethod
  </button>
</div>

<script src="http://cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
<script type="application/javascript">
Vue.component('child', {
  template: '<div></div>',
  methods: {
    // 定义方法用于父实例调用
    childMethod() {
      console.log('call child method success!');
    }
  }
});

new Vue({
  el: '#app',
  methods: {
    callChildMethod() {
      console.log('call app method success!');
      // 通过 refs 找到子组件后直接调用方法
      this.$refs.child.childMethod();
    }
  }
})
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容