vxe-vxe-modal使用

1.父组件中进行引入

 <FileDeliver ref="Data" :show="newFileShow" @confirm="confirmNewFile" @cancel="newFileShow = false"/>

data() {
   return {
      newFileShow:false
           }
       }

confirmNewFile(value){
                this.newFileShow = value
                this.loadData();
            },

2.vxe子组件使用

<template>
  <vxe-modal v-model="show" :loading="loading" :title="title" width="520" height="400" @close="close" destroy-on-close>
        <template #default>
            <vxe-form @reset="close" @submit="confirm" ref="formRef" :data="mdl" :rules="formRules" title-align="right" title-width="120" >
                <vxe-form-item title="xxx:" field="xxx" span="23">
                    <template #default>
                    </template>
                </vxe-form-item>
                <vxe-form-item align="center" span="23" >
                    <template #default>
                        <div style="height:140px;">
                            <vxe-button type="reset" style="margin-top:80px">取消</vxe-button>
                            <vxe-button type="submit" status="primary">确认</vxe-button>
                        </div>
                    </template>
                </vxe-form-item>
            </vxe-form>
        </template>
    </vxe-modal>
</template>
<script>
 
 export default {
    name: 'son',
    props: {
        show: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return{
            title: "xxx",
            taskInfo: {},
            formRules: {},
            mdl: {},
            loading: false
        }
    },
    methods: {
        confirm(){
            this.$emit('confirm', false);
        },
        close() {
            this.$emit('cancel');
        },
    }
}
</script>
<style lang="less" scoped>
</style>