(1)在父组件中引入子组件

<template>
     <dialog1 v-if="dialog1Visible" ref="dialog1" ></dialog1>
</template>


<script>
    import dialog1 from "./components/dialog1.vue";

    export default {
        data() {

            return {
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                dialog1Visible:false,   //打开dialog1

            }
        },
        components:{
            dialog1
        },

(2)在父组件中设置子组件的visible可见性
dialog1Visible字段用于设置可见性
openDialog1Visible为子组件中设置可见性的方法

methods: {
            onSubmit() {
                console.log('submit!');
            },
            handleShowDialog(){
                this.dialog1Visible=true;
                this.$nextTick(()=>{
                    this.$refs.dialog1.openDialog1Visible();
                });
            },            
  }

(3)在子组件中设置<el-dialog 的可见性
visible.sync="dialogFormVisible"字段用于设置可见性,dialogFormVisible初始值为false

<template>
<el-dialog title="收货地址"
               :visible.sync="dialogFormVisible"
               class="taskDialog"
               :close-on-click-modal="false"
               :append-to-body="true">
 </template>
<script>
    export default {
        name: "dialog1",
        data(){
            return{
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                dialogFormVisible:false,
                formLabelWidth: '120px'
            }
        },
        methods:{
            openDialog1Visible(){
                this.dialogFormVisible=true;
            }
        }
    }
</script>

Logo

前往低代码交流专区

更多推荐