[ElementPlus] 父组件点击弹窗, 在子组件中显示表单

特别鸣谢: new bing

父组件代码:

<template>
    <div class="box">
        <!-- 父组件 -->
        <el-button @click="showIt">查看弹窗</el-button>
        <Sub :isShow="isShow"  @update:isShow="isShow = $event"/>
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue';
    import Sub from './Sub.vue'
    let isShow = ref(false);

    const showIt = () => {
        isShow.value = true
        console.log("显示弹窗");
        console.log(isShow.value);
        
    }
</script>

子组件代码:

<template>
    <div>
        <el-dialog v-model="localIsShow" title="信息">
            <el-form :model="form">
                <el-form-item label="这是子表单" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">Cancel</el-button>
                    <el-button type="primary">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
    import {ref, reactive, watch} from "vue";

    const form = reactive({
        name: ''
    })

    const props = defineProps({
        isShow: Boolean
    })

    let localIsShow = ref(props.isShow)

    watch(() => props.isShow, (newVal) => {
        localIsShow.value = newVal
    })

    const emit = defineEmits(['update:isShow'])
    const cancel = () => {
        localIsShow.value = false
        emit('update:isShow', false)
    }
</script>

最终效果