Vue3: 定义全局通用函数

原创已于 2023-08-01 16:52:03 修改 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-08-01 16:51:41 首次发布

vue3学习笔记专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何在Vue3应用中通过在实例原型上添加全局函数，如$showMessage，实现在整个应用中任意组件调用。示例展示了如何创建并调用这个显示提示信息的函数。

全局通用函数：
在Vue 3应用中，您可以通过在Vue实例原型上添加方法来创建一个全局通用函数。这样，该函数就可以在整个应用程序中的任何Vue组件中使用。
例如，假设您想创建一个用于显示提示信息的全局函数，您可以这样做：

// main.js 或 main.ts
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 全局通用函数
app.config.globalProperties.$showMessage = function (message) {
  alert(message);
};

app.mount('#app');

现在，在您的Vue组件中，您可以通过this.$showMessage来调用该全局通用函数，以显示提示信息：

<template>
  <button @click="showMessage">点击显示消息</button>
</template>

<script>
export default {
  methods: {
    showMessage() {
      this.$showMessage('这是一个全局通用函数示例！');
    }
  }
}
</script>