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

父组件调用子组件方法

作者: 张先森Mr_zhang | 来源:发表于2018-01-18 16:21 被阅读0次
    <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>
    

    相关文章

      网友评论

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

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