全局函数

需要全局使用的函数

utils/myAlert

const myalert = (val:any):void => {
  alert(val);
};
export default { myalert };

方式1：provide / inject

main.js

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
import myAlert from "./utils/myAlert.js";
// provide
app.provide("$myAlert", myAlert);

app.mount("#app"); 

需要使用函数的组件

<template></template>
<script setup lang="ts">
import { inject } from "vue";
const $myAlert = inject("$myAlert");   
</script>
<style lang="less" scoped></style>

方式2：globalProperties

main.js

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);

import { myAlert } from "./utils/myAlert.js";
app.config.globalProperties.$myAlert = myalert

app.mount("#app"); 

需要使用函数的组件

<template>
	<button @click="$myAlert('data')">按钮</button>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped></style>

方式3：mixin

main.js

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App); 

import { myAlert } from "./utils/myAlert.js";
// vue3 不建议用 mixin 
// 官方建议使用 hooks
app.mixin({
    methods: {
         $myalert: myAlert 
    }
})

app.mount("#app"); 

需要使用函数的组件

<template>
	<button @click="$myAlert('data')">按钮</button>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped></style>