Vue3中全局组件的使用

一、创建组件

在components中新建CusMessage.vue

 
<script>
    import { ElMessage } from 'element-plus'
    export default {
        name: "CurMessage",
        data(){
            return{
                isShow:false,
                msg:"发送请求成功",
                type:'success'
            }
        },
        watch:{
            isShow(newVal){
                if(newVal){
                    ElMessage({
                        message:this.msg,
                        type:this.type
                    })
                }
            }
        }
    }
script>
 
<style scoped>
 
style>

二、创建公共插件js

在src目录下，新建plugin文件夹，然后创建message.js,

在vue3中挂载方式改为

app.config.globalProperties

import CurMessage from "@/components/CusMessage";
import {createApp} from 'vue'
 
const message = {}
//声明变量存放构造器
let $vm
message.install = function (app) {
    if(!$vm){
        // 1、实例化并绑定组件
        const Message = createApp(CurMessage);
        $vm = Message.mount(document.createElement("div"));
        document.body.appendChild($vm.$el)
    }
    $vm.isShow = false;
    let message = {
        show(msg,type="success"){
            $vm.isShow = true;
            $vm.msg = msg;
            $vm.type = type;
            setTimeout(() => {
                this.hide()
            },1000)
        },
        hide(){
            $vm.isShow = false;
        }
    }
    if(!app.message){
        app.$message = message
    }
    app.config.globalProperties.$message = app.$message;
}
export default message;

三、全局挂载

在你的main.js入口文件中挂载，

四、在vue中调用

 1、引入

import { ref, watch, reactive, getCurrentInstance } from 'vue'
export default{
    setup(props,{emit}){
        const { proxy } = getCurrentInstance()
        proxy.$message.show('操作成功！')
    }
}