vue父组件调用动态子组件方法

父组件

<template>

  <div class="father">

    <component :is="currentTab" ref="child"></component>

　　<button @click="clickFn">点击调用子组件方法</button>

  </div>

</template>

//引入的2个子组件

import  childone from ''

import childtwo  from ''

 

data(){

　　return{

　　　　//动态子组件

　　　　currentTab:'childone'　

　　}

}

 

methods:{

　　// 点击调用子组件方法，注意要加上this.$nextTick，否则会出现ref报错

　　clickFn(){　　　　　

　　　　　　this.currentTab = ''childtow'  //切换组件后触发子组件方法

        　　　　this.$nextTick(()=>{

          　　　　this.$refs.child.childFn()

        　　　　})

　　}

}

 

子组件： 每一个子组件都包含这个方法

methods{

　　childFn(){// 子组件方法

　　}

}

 

 

原理就是动态组件切换时，调用子组件的方法必须在组件全部加载完成后再去调用，否则会出现调用了上一个动态组件的方法。