vue3弹窗编写

1.使用组件传参和计算属性来控制弹窗

父组件

 <template>
     <el-button @click="goTest('test')">测试</el-button>
     <el-button @click="goTest('edit',data)">编辑</el-button>
     <Test v-model:dialogVisible="testVisible" :currentData="currentData" @update-query="onSearch"/>
 </template>
 ​
 <script setup>
 import Test from './test.vue'
 const testVisible = ref(null)   // 控制子组件显示
 const currentData = ref(null)   // 编辑条件下回显的数据
 const goTest = (type,row = null) => {
     // type为打开类型, row为传输的数据
    testVisible.value = true // 将子组件打开（组件传参）
    currentData.value = type === 'edit' ? row : null // 如果是编辑的时候才给currentData赋值否则为null
 }
 ​
 const onSeach = async() => {    // 请求接口
     await 接口()
 }
 </script>

子组件

 <template>
     <el-dialog
         v-model="visible"
         :title="title"
         width="550px"
         center
         :destroy-on-close="true"
         @open="handleOpen"
         @closed="handleClose"
     >
         <el-form>
             <el-form-item label="测试">
                 <el-input v-model="test" />
             </el-form-item>
         </el-form>
     </el-dialog>
 </template>
 ​
 <script setup>
 const emit = defineEmits(['update:dialogVisible', 'updateQuery'])
 const props = defineProps({
     dialogVisible: {
         type: Boolean,
         default: false
     },
     currentData: {
         type: [Object, Array, null, String],
         default: null
     }
 })
 const searchForm = reactive({
     test: null
 })
 ​
 // 计算弹框的显示
 const visible = computed(() => {
     return props.dialogVisible  // 父组件控制
 })
 ​
 const handleOpen = () => {
     if(props.currentData.id) {  // 如果为编辑则需要将传入的数据和searchFrom合并
         Object.assign(searchForm, props.currentData)
     }
 }
 ​
 const handleClose = () => {
     Object.keys(searchForm).forEach(key => {    // 关闭时进行表单数据清空
         searchForm[key] = null
     })
     emit('update:dialogVisible', false)
     emit('updateQuery') // 关闭后刷新父组件(再次请求接口)
 }
 </script>

2.通过ref控制 defineExpose

父组件

 <template>
     <el-button @click="goTest('test')">测试</el-button>
     <el-button @click="goTest('edit',data)">编辑</el-button>
     <Test ref="dialogRef" @update-query="onSearch"/>
 </template>
 ​
 <script setup>
 import Test from './test.vue'
 const dialogRef = ref(null)
 const goTest = (type,row = null) => {
     // type为打开类型, row为传输的数据
    dialogRef.value.openDialog(type, row)
 }
 ​
 const onSeach = async() => {    // 请求接口
     await 接口()
 }
 </script>

子组件

 <script setup>
 const visible = ref(false)
 const emit = defineEmits(['updateQuery'])
 const searchForm = reactive({
     test: null
 })
 ​
 const openDialog = (type,data = null) => {
     visible.value = true
     if(type==="edit") { // 如果为编辑则需要将传入的数据和searchFrom合并
         Object.assign(searchForm, data)
     }
 }
 ​
 const handleClose = () => {
     Object.keys(searchForm).forEach(key => {    // 关闭时进行表单数据清空
         searchForm[key] = null
     })
     visible.value = false
     emit('updateQuery') // 关闭后刷新父组件(再次请求接口)
 }
 defineExpose({ openDialog })
 </script>