1.在父组件里面引入子组件，在子组件标签上加上 ref="自己定义"，如下面定义的ref = 'ccc'
2.直接在需要触发子组件的方法内加上 this.refs.ccc.子组件方法 ，如下面的this.refs.ccc.test(param);
这个时候console.log(this.$refs.ccc)输出的是一个vue对象
如果输出的是 undefind
就需要这样写，因为我在子组件上加了一个v-if来判断子组件是否显示
this.$nextTick(() => {
this.$refs.ccc.test('hello');
});
因为我在子组件上加了一个v-if来判断子组件是否显示
$nextTick在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
dom更新机制，vue是数据驱动视图即数据改变后，dom就会更新，但是要注意的是并不是修改数据的当下，视图会立即跟新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
父组件
<template>
<div>
//子组件
<vChild v-if="flag"
ref="ccc"></vChild>
</div>
</template>
<script>
import vChild form './child.vue'
export default{
data(){
return{}
},
components:{
vChild
},
methods:{
gogo(){
this.$nextTick(() => {
this.$refs.ccc.test('hello');
});
}
}
}
</script>
子组件 child.vue
<template>
<div>
//子组件
<vChild v-if="flag"></vChild>
</div>
</template>
<script>
export default{
data(){
return{}
},
methods:{
test(val){
console.log(val);
//do someThing
}
}
}
</script>
