vue父组件触发子组件方法

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>