使用 provide 和 inject 注册全局
mian.ts中注册
// main.js
import { createApp, provide } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 创建一个全局函数
function globalFunction() {
console.log('Hello, I am a global function!');
}
// 在应用程序的根组件中使用 provide 将函数提供给所有子组件
app.provide('globalFunction', globalFunction);
app.mount('#app');
在组件中使用
<!-- ChildComponent.vue -->
<template>
<div>
<button @click="callGlobalFunction">Call Global Function</button>
</div>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
// 使用 inject 获取全局函数
const globalFunction = inject('globalFunction');
// 在组件中调用全局函数
const callGlobalFunction = () => {
globalFunction();
};
return {
callGlobalFunction
};
}
};
</script>
还有vue 中的 getCurrentInstance的使用
但是不推荐