1. 定义组件
import form from "../form/index.vue" //组件路径
export default {
components: {
WebSecurityLogForm: form, //引用组件
},
2. 使用组件
<!-- 表单 -->
<WebSecurityLogForm
:open.sync="open" :id.sync="id" :disabled="disabled" @finishCommit="finishCommit"
></WebSecurityLogForm>
初始化的信息return
disabled: false,
// 是否显示弹出层
open: false,
id: null,
3. 调用组件
/** 新增按钮操作 */
handleAdd() {
this.id = null
this.disabled = false
this.open = true
this.title = '添加安全日志'
},
4. 子级组件接收
props: {
id: {
type: String,
default: null,
},
open: Boolean,
disabled: Boolean,
},
data() {
return {
// 弹出层标题
title: '',
view: false,
form: {},
// 表单校验
rules: {}
}
},
watch: {
open(val) {
if (val) {
this.get(this.id)
this.title = '新增安全日志'
}else {
this.title = '新增安全日志'
}
},
},
5. 子集组件表单
<el-dialog class="spec-dialog" :title="title" :visible="open"
width="80%" append-to-body :close-on-click-modal="false"
:before-close="cancel">
132132132
123132
</el-dialog>
6. 子集组件点击取消或者确定
// 取消按钮
cancel() {
this.form = {}
this.$emit('finishCommit', true)
},
7. 父集组件接收回调函数关闭窗口就结束了
finishCommit(row){
this.open = false
this.getList();
},