Vue3 Options API导入全局函数模板使用报错的解决方法咨询

问题原因 #

Vue模板的上下文是组件实例（即_ctx），直接导入的全局函数并没有挂载到组件实例上，所以模板无法识别并调用它。

方案1：挂载到组件的methods（单组件使用） #

无需额外封装本地函数，直接把导入的函数赋值给methods，模板就能直接访问：

<script>
import { formatStr } from '@/vue/folder/global';

export default {
  methods: {
    // 直接挂载导入的函数
    formatStr
  }
}
</script>

<template>
  <!-- 模板中直接调用 -->
  <div>{{ formatStr() }}</div>
</template>

方案2：全局注册（多组件复用） #

如果该函数需要在多个组件中使用，可在项目入口（如main.js）全局注册到Vue实例，后续组件无需重复导入即可使用：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { formatStr } from '@/vue/folder/global';

const app = createApp(App);
// 注册为全局属性
app.config.globalProperties.$formatStr = formatStr;

app.mount('#app');

在组件中直接使用：

<template>
  <!-- 模板中调用全局函数 -->
  <div>{{ $formatStr() }}</div>
</template>

<script>
export default {
  // script中也可通过this访问
  mounted() {
    console.log(this.$formatStr());
  }
}
</script>

内容的提问来源于stack exchange，提问作者Antor