美文网首页
Vue 调用子组件方法

Vue 调用子组件方法

作者: 伍源辉 | 来源:发表于2017-02-07 16:38 被阅读1783次
<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>

相关文章

网友评论

      本文标题:Vue 调用子组件方法

      本文链接:https://www.haomeiwen.com/subject/znkmittx.html