Ant Design Vue 中 modal 利用 $refs 简单使用

Posted 2020-12-15 dafei4

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>

View Code

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>

View Code