虽然在vue3中不再推荐使用mixin了，但是有时候我们在某些需求的时候，使用mixin还是比较方便
下面简单一个案例：网站中登录是弹窗，在任何一个页面都有可能需要调用弹窗进行登录

一、创建全局混入插件,global.js

import LoginModal from '@/components/LoginModal'
export default {
    install(app) {
        //实现一个全局登录组件，未登录的时候，点击页面按钮进行弹窗登录

        //1.先注入一个全局组件，在需要的地方直接使用     
        //<login-modal :show-login="loginVisible" @no-login-emit="_noLoginFunc"></login-modal>
        app.component('login-modal', LoginModal)

        //2.全局混入登录方法
        app.mixin({
            data() {
                return {
                    loginVisible: false //是否显示登录框
                }
            },
            methods: {
                //用于组件调用
                //也用于子组件通过emit调用关闭登录框

                //在setup中使用该方法
                //   const { proxy } = getCurrentInstance()
                //   proxy._noLoginFunc(true)
                _noLoginFunc(type = true) {
                    this.loginVisible = type
                }
            }
        })
    }
}

二、创建一个弹窗登录组件

<template>
    <teleport to="body">
        <el-dialog v-model="showLogin" title="登录/注册">
            <div class="form">
                <div>
                    <el-button @click="cancelLogin">关闭</el-button>
                    <el-button type="primary" @click="toLogin">登录</el-button>
                </div>
            </div>
        </el-dialog>
    </teleport>
</template>
<script setup>
import { inject } from 'vue'
import { ElDialog, ElButton } from 'element-plus'
defineProps({
    showLogin: {
        type: Boolean,
        default: () => true
    },
    noLoginEmit: {
        type: Function,
        default: () => {}
    }
})

//登录操作
function toLogin() {
    closeLogin(true)
}
//取消登录
function cancelLogin() {
    closeLogin(false)
}


//emit使用
const emit = defineEmits(['noLoginEmit'])
//provider/inject，登录成功刷新页面
const reload = inject('reload')
//关闭登录
function closeLogin(isLogin = false) {
    if (isLogin) {
        reload()
    }
    //调用父级传入的属性方法，关闭弹窗
    emit('noLoginEmit', false)
}
</script>

三、在需要的时候调用

<template>
    <button @click="showLogin">点击登录</button>
    <div>主要用于常见的弹窗登录，在任何一个页面都有可能会使用弹窗登录</div>
    <login-modal :show-login="loginVisible" @no-login-emit="_noLoginFunc"></login-modal>
</template>

<script setup>
import { getCurrentInstance } from 'vue'

//通过下面方法调用全局混入的方法
const { proxy } = getCurrentInstance()
function showLogin() {
    proxy._noLoginFunc(true)
}
</script>

使用provide/inject实现，这个就比较简单了，不需要创建global.js了

1.在App.js中引入组件以及创建provide方法

<template>
    <div id="app">
        <login-modal :show-login="loginVisible" @no-login-emit="_showLogin" />
        <router-view />
    </div>
</template>
<script setup>
import { ref, provide} from 'vue'

const loginVisible = ref(false)

const _showLogin = (type = true) => {
    loginVisible.value = type
}
provide('_showLogin', _showLogin)
</script>

2.在需要的地方直接inject

const _showLogin = inject('_showLogin')
function showlogin() {
    _showLogin()
}