Skip to main content

全域 function 引用

整理 vue2 和 vue3 的 global function 寫法的差別。如果要用的話，要特別小心~

Vue3 gloabl function 怎麼寫？​

在 Vue 3 中，你可以使用 app.config.globalProperties 來定義全域函數。以下是一個簡單的範例，展示如何在 Vue 3 中定義一個全域函數：

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app.config.globalProperties.$myFunction = () => {
  // 在這裡定義你的全域函數內容
};

app.mount("#app");

這樣一來，你就可以在整個應用程式中使用 $myFunction 這個全域函數了。希望這能幫助到你！

vue2 global function 怎麼寫？​

在 Vue 2 中，你可以使用 Vue.prototype 來定義全域函數。以下是一個簡單的範例，展示如何在 Vue 2 中定義一個全域函數：

import Vue from "vue";
import App from "./App.vue";

Vue.prototype.$myFunction = function () {
  // 在這裡定義你的全域函數內容
};

new Vue({
  render: (h) => h(App),
}).$mount("#app");

這樣一來，你就可以在整個應用程式中使用 $myFunction 這個全域函數了。希望這能幫助到你！

Nuxt3 的 global function 怎麼寫？​

和 vue3 的寫法很像

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.config.globalProperties.$auth = (name: string) => {
    return name;
  };
});

但是如果在 script 中要引用的話比較不好引用，只能用 mounted 的地方引用。

export default {
  mounted() {
    console.log(this.msg); // 'hello'
  },
};

官方的方法

const nuxtApp = useNuxtApp();
nuxtApp.provide("hello", (name) => `Hello ${name}!`);

// Prints "Hello name!"
console.log(nuxtApp.$hello("name"));

nuxt3 中的 useNuxtApp 使用详解 - 掘金