uniapp+vue3 在App.vue中如何设置全局调用方法

在uni-app中，如果你想在App.vue的setup函数中设置全局可调用的方法，你可以通过以下几种方式来实现：

1. 使用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>

 

 2、使用Vue 3的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(); // 调用全局方法
  }
}

 

3. 使用Vue插件方式（适用于所有组件）

    创建一个插件，然后在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(); // 调用全局方法
  }
}