vue使用其他组件弹窗（新增编辑）

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();
        },