vue中如何用纯js调用组件

项目中有这样的需求
创建任务的抽屉需要在多个页面中调用，如果每个页面都要写import然后写html啥的很麻烦，所以决定模仿组件库的this.$message，这种一行调用的方法。
主要功能如下：
1.能给抽屉传值
2.抽屉关闭后有callback函数，方便刷新主页面数据

尝试了两种写法，方法一，使用install
代码如下：
drawer.vue

<template>
    <el-drawer title="我是外面的 Drawer" :visible.sync="drawer" size="50%" @closed="closed(222)">
        <div>
            <el-button @click="innerDrawer = true">打开里面的!</el-button>
            <el-drawer title="我是里面的" :append-to-body="true" :visible.sync="innerDrawer">
                <p>_(:зゝ∠)_</p>
            </el-drawer>
        </div>
    </el-drawer>
</template>

<script>
    export default {
        props: {
            drawer: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                innerDrawer: false
            };
        },
        methods: {
            closed(val) {
                this.callback && this.callback(val)
            }
        }
    };
</script>

index.js

import drawerVue from "./drawer.vue"

const showDrawer = {};

showDrawer.install = function (Vue, options = {}) {
    const DrawerConstructor = Vue.extend(drawerVue);
    let currentMsg;
    const initInstance = () => {
        currentMsg = new DrawerConstructor({});
        document.body.appendChild(currentMsg.$mount().$el);
    };
    Vue.prototype.$showDrawer = {
        showDrawer(options) {
            if (!currentMsg) {
                initInstance();
            }
            if (typeof options === 'object') {
                Object.assign(currentMsg, options);
            }
        }
    };
};
export default showDrawer;
  

main.js

import showDrawer from './components/common/drawer/index.js';
Vue.use(showDrawer);

调用

<template>
    <div>
        <el-button @click="handleClick" type="primary" style="margin-left: 16px;">
            点我打开
        </el-button>
        <el-button @click="handleClick" type="primary" style="margin-left: 16px;">
            点我打开2
        </el-button>
    </div>
</template>
<script>
    export default {
        methods: {
            handleClick() {
                this.$showDrawer.showDrawer({
                    drawer: true,
                    callback: val => {
                        console.log(val, 111) //这里会打印出222，111
                    }
                })
            }
        }
    }
</script>

不使用install的方法二
代码如下：
drawer.vue

<template>
    <el-drawer title="我是外面的 Drawer" :visible.sync="drawer" size="50%" @closed="closed(222)">
        <div>
            <el-button @click="innerDrawer = true">打开里面的!</el-button>
            <el-drawer title="我是里面的" :append-to-body="true" :visible.sync="innerDrawer">
                <p>_(:зゝ∠)_</p>
            </el-drawer>
        </div>
    </el-drawer>
</template>

<script>
    export default {
        data() {
            return {
                innerDrawer: false,
                drawer: false
            };
        },
        methods: {
            closed(val) {
                this.callback && this.callback(val)
            }
        }
    };
</script>

index.js

import Vue from "vue";
import drawerVue from "./drawer.vue"

const showDrawer = (options = {}) => {
    const DrawerConstructor = Vue.extend(drawerVue);
    let data = {}, methods = {};
    Object.keys(options).forEach(e => {
        if (typeof options[e] === 'function') {
            methods[e] = options[e];
        } else {
            data[e] = options[e];
        }
    })
    let instance = new DrawerConstructor({
        data: data,
        methods: methods
    });
    document.body.appendChild(instance.$mount().$el);
}
export default showDrawer;

main.js

import showDrawer from './components/common/drawer/index.js';
Vue.prototype.$showDrawer=showDrawer

调用

<template>
    <div>
        <el-button @click="handleClick" type="primary" style="margin-left: 16px;">
            点我打开
        </el-button>
        <el-button @click="handleClick" type="primary" style="margin-left: 16px;">
            点我打开2
        </el-button>
    </div>
</template>
<script>
    export default {
        methods: {
            handleClick() {
                this.$showDrawer({
                    drawer: true,
                    callback: val => {
                        console.log(val, 111)
                    }
                })
            }
        }
    }
</script>

个人更倾向于用方法二，因为本菜鸡不知道方法一怎么实现局部注册