Ant Design Vue 中 modal 利用 $refs  簡單使用

主要使用到   this.$refs.closeBtnModal.initShow(); 避免了父組件傳值,再使用this.$emit() 的繁瑣步驟,

這樣可以在子組件中控制modal打開和關閉,不需要在父組件中寫代碼處理

 

01) 父組件

<template>
    <div>
        <a-button @click="showModal">show modal</a-button>
        <login-close-btn  ref="closeBtnModal" style="margin-left: 10px;">我是組件</login-close-btn>
    </div>
</template>
<script>

    /* 這是ant-design-vue */
    import Vue from 'vue'
    import Antd, { message,Select } from 'ant-design-vue'  //這是ant-design-vue
    import 'ant-design-vue/dist/antd.css'
    Vue.use(Antd);
    /* 這是ant-design-vue */

    import loginCloseBtn from '../../components/close-btn.vue'
    
    export default {
        components:{loginCloseBtn},
        data() {
            return {}
        },
        methods: {
            showModal() {
                this.$nextTick(()=>{
                    this.$refs.closeBtnModal.initShow();  // 這種方式,直接去子組件中控制modal打開和關閉
                })
            }
        },
    };
</script>

<style scoped>

</style>

02) 子組件

<template>
    <div>
        <a-modal title="我是title" :visible=sureVisible  @ok="handleOk" @cancel="handleCancel">
            我是組件modal
        </a-modal>
    </div>
</template>

<script>
    export default {
        name: "close-btn",
        data(){
            return{
                sureVisible:false
            }
        },
        methods:{
            initShow(){
                this.sureVisible=true
            },
            handleCancel(){
                this.sureVisible=false
            },
            handleOk(e) {
                this.sureVisible = false;
            },
        }
    }
</script>

<style scoped>

</style>