使用vue3封装一个dialog组件_vue3封装dialog

在element-ui做的表格中最常见的就是表格的增删改查，在添加和修改大部分我们公用一个弹窗，vue3中，我我们会用的defineExpose():

//子组件
const defaultForm = {
  title: '',
  cate_id: '',
  cover_img: '',
  content: '',
  state: ''
}
const formModel = ref({ ...defaultForm })
const open = (row) => {
  visibleDrawer.value = true
  if (row.id) {
    console.log('编辑回显')
  } else {
    formModel.value = { ...defaultForm }
  }
}

//父组件
 <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
</template>
 
 
const handleEdit = (index, row) => {
  dialogRef.value.open(row)  //编辑
}
const addCate = () => {
  dialogRef.value.open({})  //添加
}