父组件调用子组件方法

2018-01-18  本文已影响0人  张先森Mr_zhang
<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>
上一篇 下一篇

猜你喜欢

热点阅读