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

1. 定义组件

import form from "../form/index.vue" //组件路径
export default {
    components: {
        WebSecurityLogForm: form, //引用组件
    },

2. 使用组件

初始化的信息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. 子集组件表单

  
    132132132
    123132
  

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

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

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

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