函数式自定义组件调用

创建函数fn，如果是vue3可以使用createApp创建实例

import dom from '@/components/dom.vue'; // 准备使用函数调用的组件
import Vue from 'vue';
// 函数式组件调用
export default function (url) {
    // 扩展组件
    const PublicUpdate = Vue.extend(dom);
    const div = document.createElement('div')
    // 实例化组件并挂载
    const updateEl = new PublicUpdate().$mount(div)
    // props参数传入
    updateEl.url = url
    // 组件函数调用
    updateEl.show()
    // 组件自定义事件监听
    updateEl.$on('JImportModalCancel', function () {
        // 销毁组件
        updateEl.$destroy()
        // 销毁创建的dom
        document.body.removeChild(div)
    })
    // 返回组件实例
    return updateEl;
}

函数调用

import fn from './fn.js'
Vue.prototype.$fn = fn

this.$fn()