在uni-app中，如果你想在App.vue的setup函数中设置全局可调用的方法，你可以通过以下几种方式来实现：
provide和inject （vue3 推荐使用此方法） 第一步：在vue3中使用provide和inject来传递方法到全局。
在App.vue中创建全局方法：
<script setup> import { provide } from "vue";
// 全局方法名 const globalTheme = (data) => { console.log("设置了全局方法", data); }; // 设置 provide("globalTheme", globalTheme); </script>
第二步： 在对应的页面或者组件调用全局方法
<template>
<View class="custom-tab-page app-page order-page" :style="themeStyle">
<uni-row class="demo-uni-row">
<uni-col :span="8">
<button class="theme-btn" @click="toggleTheme('light')">白色主题</button>
</uni-col>
<uni-col :span="8">
<button class="theme-btn" @click="toggleTheme('dark')">黑色主题</button>
</uni-col>
<uni-col :span="8">
<button class="theme-btn" @click="toggleTheme('orange')">深红主题</button>
</uni-col>
</uni-row>
</View>
</template>
<script setup>
import { ref, inject } from "vue";
const globalTheme = inject("globalTheme"); // 注入全局方法
const themeStyle = ref("");
const toggleTheme = (name) => {
if (name == "dark") {
themeStyle.value = `
--primary-color: #000000;
--text-color: #f1f1f1;
`;
} else if (name == "orange") {
themeStyle.value = `
--primary-color: #ee6666;
--text-color: #3ba272;
`;
} else {
themeStyle.value = `
--primary-color: #FFFFFF;
--text-color: #ff0000;
`;
}
// 调用全局方法
globalTheme(name);
};
</script>
<style scoped>
.app-page {
background-color: var(--primary-color);
}
.theme-btn {
color: var(--text-color);
}
</style>
app.config.globalProperties （此方法我没试过，再次记录一下） 可以在App.vue的setup函数中，通过getCurrentInstance().appContext.config.globalProperties来添加全局方法。这种方法适用于Vue 2和Vue 3
第一步：在App.vue方法中
import { getCurrentInstance } from 'vue';
export default {
setup() {
const app = getCurrentInstance().appContext.config.globalProperties;
app.globalMethod = () => {
console.log('这是全局方法');
};
}
}
第二步: 在其他组件中调用
export default { mounted() { this.globalMethod(); // 调用全局方法 } }
创建一个插件，然后在main.js中全局注册这个插件，也是一种不错的方式。
第一步: 创建插件文件（globalMethods.js）
export default { install(app) { app.config.globalProperties.globalMethod = () => { console.log('这是全局方法'); }; } }
第二步：在main.js 中注入插件
import { createApp } from 'vue';
import App from './App.vue';
import GlobalMethods from './plugins/globalMethods';
const app = createApp(App);
app.use(GlobalMethods); // 使用插件
app.mount('#app');
第三步：在组件中调用全局方法
export default { mounted() { this.globalMethod(); // 调用全局方法 } }
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。