Vue3 全局实例上挂载属性方法案例讲解

let art = () => {
  alert("事件方法")
}
import Vue from 'vue'
Vue.prototype.$art = art

    mounted() {
        this.$art()
    }

import { createApp } from 'vue';
import App from './App.vue'
const app = createApp(App)
let art = () => {
  alert("事件方法")
}
app.config.globalProperties.art = art      //  通过 globalProperties  将回调函数绑定在全局
app.mount('#app')

<script setup>
import { getCurrentInstance } from "vue"   // 引用 getCurrentInstance
//  getCurrentInstance().appContext.config.globalProperties 获取全局上下文，可以解构得到 我们前面绑定的数据方法
const { art } = getCurrentInstance().appContext.config.globalProperties
let clicklogin = (formName) => {
  art()     //直接调用方法本身
}
</script>

<script setup>
import { getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance()    //获取 getCurrentInstance 身上的 proxy 代理属性
let clicklogin = (formName) => {
  proxy.art()           //可以直接在 proxy代理属性身上调用方法。
}
</script>

import { createApp } from 'vue';
import App from './App.vue'
const app = createApp(App)
let art = () => {
  alert("事件方法")
}
app.provide("art", art)    //将要挂载的参数， 通过 provide ，注入给后代实例
app.mount('#app')

<script setup>
import { inject } from "vue"
let art = inject("art")      //  通过 inject 可以获取到 全局实例上 通过 provide  所注入的参数值。
let clicklogin = (formName) => {
    art()
}
</script>