基于ref和nextTick()实现打开关闭子组件modal

基于vue2.0

父组件father：

<template>
    <div>
        <button @click="showModal">按钮</button>
        <children v-if="showChildren" ref="childrenRef"></children>
    </div>
</template>

import children from '@/views/Father/components/Children.vue'
<script>
export default{
    components:{
        children
    },
    data(){
        return{
            showChildren: false,
            //该属性用于控制子组件是否创建
        }
    },
    methods:{
        showModal(){
            this.showChildren = true;
            this.$nextTick(()=>{
                this.$refs.childrenRef.init()
            })
        }
    }
}
</script>

子组件children：

<template>
    <div>
        //这里使用的是ant design vue组件库中的modal
        //v-model属性用于控制这个modal显示与隐藏
        //@ok和@can