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 = nullthis.disabled = falsethis.open = truethis.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">132132132123132</el-dialog>

6. 子集组件点击取消或者确定

// 取消按钮cancel() {this.form = {}this.$emit('finishCommit', true)},

7. 父集组件接收回调函数关闭窗口就结束了

finishCommit(row){this.open  = falsethis.getList();},