基于elementui二次开发全局组件，通过函数方式调用组件,带详细说明

文件结构如下，新建一个文件夹放置组件和js文件

在index.vue文件中写组件，代码如下。本次二次封装的elementui的el-dialog。

<template>
    <div>
        <el-dialog :visible.sync="dialogVisible" width="560px" @close="close">
            <div>
                <div>{{ title }}</div>
                <div>{{ content }}</div>
                <div>
                    <el-button @click="dialogVisible = false">确认</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: true,
            title: '',
            content: ''
        }
    },
    methods: {
        close() {
            this.dialogVisible = false;
            this.$el.parentNode.removeChild(this.$el);//清除dom元素
        }
    }
}
</script>

在index.js文件中写如下。注意看注释说明

import Vue from 'vue'
import Tip from './index.vue'

const EditionTipConstructor =  Vue.extend(Tip)//通过Vue下的extend方法可以得到组件构造函数//Tip是引入进来的组件对象
           
export  function EditionTip(options) {//通过函数创建组件
  const EditionTipcom = new EditionTipConstructor({data: options}).$mount()   //new EditionTipConstructor的结果得到vue组件对象 //xx.$mount() 放置渲染出来的dom，并将dom挂载到属性上
   document.body.appendChild(EditionTipcom.$el)//EditionTipcom是个组件对象，EditionTip.$el是组件对象渲染出来的dom
}
   

 最后在main.js中配置

import {EditionTip} from '@/views/editionTip/index.js'
Vue.prototype.$EditionTip = EditionTip;//挂载到vue实例上，可以全局使用了

页面中直接使用就行，我将其写在了mounted中

    mounted() {
        this.$EditionTip({
            title: '重要提示',
            content: '请广大居民用户积极自主下楼做核酸'
        })
    }

学习资源：【前端哈默】如何用函数调用方式创建组件【Vue小知识】_哔哩哔哩_bilibili