1:在index.js里注册组件引入到vue实例中
2:在子组件的js里加上要回调的信息
import Component from './SafeDialogCommon.vue'
const installer = {};
installer.install = function(Vue){
const constructor = Vue.extend(Component)
const instance = new constructor();
instance.$mount(document.createElement('div'))
document.body.appendChild(instance.$el)
Vue.prototype.$safeDialogCommon = (config,callback) => { //注意组件的名字
instance.config = config;
instance.callback = callback;
instance.visible = true;
}
}
export default installer
3:在子组件的vue里编写想要的信息
<template>
<div>
<!-- 通用弹框 dialog -->
<el-dialog
:visible.sync="visible"
:close-on-click-modal="false"
center
custom-class="safeprod-dialog-simple safeprod-dialog-mini">
</el-dialog>
</div>
</template>
<script>
export default {
props: {
config: {
type: Object
},
callback: {
type: Function
},
visible: {
type: Boolean
}
},
data() {
return {};
},
watch: {
visible(val) {
},
config(val) {
},
}
};
</script>
4:在父组件中调用子组件
finList(){
this.$SafeDialogCommon({
params:1//传给子组件的值
}, data => {
this.doQuery()//调用成功以后的回调
});
}