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>