下面是一个简单的示例代码，演示了如何在Vue 3中使用`
el-
dialog`实现新增和编辑功能，并且共用一个组件。
父组件：
```html
<template>
<div>
<
el-button type="primary" @click="showAdd
Dialog">新增</
el-button>
<
el-button type="primary" @click="showEdit
Dialog">编辑</
el-button>
<my-
dialog :visible="
dialogVisible" :title="
dialogTitle" :type="
dialogType" @submit="handleSubmit" @close="handleClose"></my-
dialog>
</div>
</template>
<script>
import My
Dialog from './My
Dialog.vue';
import { ref } from 'vue';
export default {
components: {
My
Dialog,
},
setup() {
const
dialogVisible = ref(false);
const
dialogTitle = ref('');
const
dialogType = ref('add');
const currentData = ref({});
const showAdd
Dialog = () => {
dialogTitle.value = '新增';
dialogType.value = 'add';
dialogVisible.value = true;
};
const showEdit
Dialog = () => {
dialogTitle.value = '编辑';
dialogType.value = 'edit';
dialogVisible.value = true;
};
const handleSubmit = (data) => {
// 处理提交逻辑
console.log(data);
dialogVisible.value = false;
};
const handleClose = () => {
dialogVisible.value = false;
};
return {
dialogVisible,
dialogTitle,
dialogType,
currentData,
showAdd
Dialog,
showEdit
Dialog,
handleSubmit,
handleClose,
};
},
};
</script>
```
子组件：
```html
<template>
<
el-
dialog :visible.sync="visible" :title="title">
<
el-form :mod
el="formData" ref="form" :rules="rules" lab
el-width="80px">
<
el-form-item lab
el="姓名" prop="name">
<
el-input v-mod
el="formData.name"></
el-input>
</
el-form-item>
<
el-form-item lab
el="年龄" prop="age">
<
el-input v-mod
el.number="formData.age"></
el-input>
</
el-form-item>
<
el-form-item lab
el="性别" prop="gender">
<
el-s
elect v-mod
el="formData.gender">
<
el-option lab
el="男" value="male"></
el-option>
<
el-option lab
el="女" value="female"></
el-option>
</
el-s
elect>
</
el-form-item>
</
el-form>
<div slot="footer">
<
el-button @click="handleClose">取消</
el-button>
<
el-button type="primary" @click="handleSubmit">确定</
el-button>
</div>
</
el-
dialog>
</template>
<script>
import { ref, watchEffect } from 'vue';
export default {
props: {
visible: {
type: Boolean,
required: true,
},
title: {
type: String,
required: true,
},
type: {
type: String,
required: true,
},
},
setup(props, { emit }) {
const formData = ref({
name: '',
age: '',
gender: '',
});
const rules = {
name: [
{ required: true,
message: '请输入姓名', trigger: 'blur' },
],
age: [
{ required: true,
message: '请输入年龄', trigger: 'blur' },
],
gender: [
{ required: true,
message: '请选择性别', trigger: 'change' },
],
};
watchEffect(() => {
if (props.visible) {
if (props.type === 'add') {
formData.value = {
name: '',
age: '',
gender: '',
};
}
else {
formData.value = {
name: '张三',
age: 18,
gender: 'male',
};
}
}
});
const handleSubmit = () => {
const form = this.$refs.form;
form.validate((valid) => {
if (valid) {
emit('submit', formData.value);
}
});
};
const handleClose = () => {
emit('close');
};
return {
formData,
rules,
handleSubmit,
handleClose,
};
},
};
</script>
```
在父组件中，我们使用`ref`创建了一个名为`
dialogVisible`的响应式变量，用于控制
弹框的
显示与隐藏。除此之外，我们还创建了一些方法，如`showAdd
Dialog`、`showEdit
Dialog`、`handleSubmit`和`handleClose`。这些方法都是通过`setup`函数返回的对象暴露出去的，供模板中使用。
在子组件中，我们接收了父组件传递过来的`visible`、`title`和`type`属性，并在`setup`函数中使用`watchEffect`监听`visible`的变化，当`visible`为`true`时，根据`type`的值来判断是新增还是编辑操作，并清空或者填充表单数据。另外，我们在`handleSubmit`方法中使用了`emit`方法触发了一个名为`submit`的自定义事件，用于向父组件传递表单数据。在父组件中，我们可以通过`@submit`监听这个事件，并处理提交逻辑。
总的来说，以上是一个简单的示例，实际开发中还需要根据具体业务需求进行
修改。
574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
