vue3挂载全局方法

• 在vue3中可以通过app.config.globalProperties来挂载全局方法。

main.js

const app = createApp(App)

// 定义全局方法
const myGlobalMethod = () => {
  console.log('This is a global method.')
}

// 挂载全局方法
app.config.globalProperties.$myGlobalMethod = myGlobalMethod

app.mount('#app')

app.vue

<template>
  <div>
    <button @click="$myGlobalMethod()">点击调用全局方法</button>
  </div>
</template>

• 挂载在app.config.globalProperties上的方法和属性,在所有组件中都可以直接访问和使用.如果有多个全局方法需要挂载,可以在main.js中一次性挂载完成。

在页面的setup中，如何引用全局方法呢

• page中--- 实测可以，这样格式和每个页面单独引入也没省什么代码。

<script setup>
  import { inject } from 'vue';
  const { myGlobalMethod } = inject('myGlobalMethod');//注入全局方法---!!!这里不对，少$
  myGlobalMethod();
</script>