由于我现在公司的项目很多都是mvc模式的，因此无法使用组件，vue的组件只能是在vue-cli脚手架搭建的项目中。

因此在开发过程中，为了避免页面代码过多，同时为了代码的复用性，还是需要用layui框架来实现组件的结构。

layer.open实现弹窗组件

layer.open({
    type: 2,
    title: '日志列表',
    closeBtn: 1,
    shadeClose: true,
    content: '/WarehouseArea/Warehouse/LogInfoList?bomId=' + row.bomID,
    area: ['80%', '80%'],
    end: (index, layero) => {
        layer.close(index);
    }
})

上面就是一个常见的组件，content是弹窗页面路径，area是弹窗的大小，end是弹窗关闭后执行的方法

layer.open传参

1.传递少量数据

可以通过content中路径拼接的方式来传递，然后弹窗页面可以通过：获取url路径的参数来获取：
获取路径参数：

function getUrlParams(name) {
    var url = window.location.search;
    if (url.indexOf('?') == -1) { return false; }
    url = url.substr(1);
    url = url.split('&');
    var name = name || '';
    var nameres;
    for (var i = 0; i < url.length; i++) {
        var info = url[i].split('=');
        var obj = {};
        obj[info[0]] = decodeURI(info[1]);
        url[i] = obj;
    }
    if (name) {
        for (var i = 0; i < url.length; i++) {
            for (var key in url[i]) {
                if (key == name) {
                    nameres = url[i][key];
                }
            }
        }
    } else {
        nameres = url;
    }
    return nameres;
};

2.传递对象参数

如果要传递对象参数，遍历对象的每个属性然后拼接到路径上，会比较麻烦，此时可以通过将vue挂载到window上，然后在弹窗页面获取对象参数即可。

（1）在mounted函数中挂载vue到window上

在vue的生命周期函数mounted中挂载到window上

 mounted() {
    window.me = this;
},

（2）在弹窗中使用父级的参数

var arr = window.parent.me.xxx;

window.parent.me就是指的是父级的vue，此时父级中的所有参数都可以获取到了。

完成！！！