js注册子组件,并回调

35 阅读1分钟

1:在index.js里注册组件引入到vue实例中 image.png 2:在子组件的js里加上要回调的信息

image.png

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()//调用成功以后的回调
    });
}