vue3 模板中直接调用工具类中的函数

在Vue 3中，你可以通过全局属性$globalMethods或类似的方式来调用工具类中的函数。这里假设你有一个工具类utils.js，它包含一个函数formatMessage：

// utils.js
export const formatMessage = (message) => {
  return `Formatted Message: ${message}`;
};

你可以在Vue组件中这样使用它：

1. 首先，在main.js中将工具类的函数添加到Vue的原型上，以便在组件中直接访问：

   // main.js
   import { createApp } from 'vue';
   import App from './App.vue';
   import * as utils from './utils';
    
   const app = createApp(App);
    
   app.config.globalProperties.$utils = utils;
    
   app.mount('#app');

2. 在Vue组件的模板中，你可以这样调用formatMessage函数：

<template>
  <div>
    {{ $utils.formatMessage('Hello World!') }}
  </div>
</template>

 确保你的工具类函数是默认导出的，以便在main.js中导入为一个对象。然后，你可以通过this.$utils.formatMessage(...)在Vue组件的JavaScript部分或模板中访问这个函数。