Vue中导入公共复用逻辑函数后template提示未引入的问题如何解决

• 核心原因：Vue 选项式API的模板仅能直接访问挂载在组件实例上的属性与方法，你仅在<script>中导入了工具函数，但没有将其注册为组件的方法，渲染阶段模板解析时无法匹配到对应实例成员，因此抛出未定义警告。
• 额外可能的错误点：你的工具文件名为NormaliseData.js（英式拼写带s），但导入语句写的是./NormalizeData（美式拼写带z），如果运行环境的文件系统对拼写/大小写敏感，会直接导入失败，也会触发该报错。

根据你的使用场景可以选择以下任意一种方案：

方案1：组件内局部注册（适合仅少量组件使用的场景） #

在组件的methods配置项中注册导入的函数即可，同时先修正导入路径的拼写问题：

<template>
    <div>
       <p>{{ NormaliseData('test function') }}</p>
    </div>
</template>
<script>
// 修正拼写和实际文件名一致
import NormaliseData from "./NormaliseData";
export default {
  // 其他组件配置
  methods: {
    // 将导入的函数注册为组件实例方法
    NormaliseData
  }
}
</script>

方案2：全局注册（适合全项目大量组件复用的场景） #

在项目入口文件中一次性挂载为全局属性，所有组件无需重复导入即可直接使用：

Vue 2 写法 #

// main.js
import Vue from 'vue'
import NormaliseData from './utils/NormaliseData'
// 挂载到Vue原型上
Vue.prototype.$normaliseData = NormaliseData

组件模板直接调用：

<p>{{ $normaliseData('test function') }}</p>

Vue 3 写法 #

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import NormaliseData from './utils/NormaliseData'

const app = createApp(App)
// 挂载到全局属性
app.config.globalProperties.$normaliseData = NormaliseData
app.mount('#app')

方案3：Vue3 <script setup> 语法糖场景 #

如果是使用Vue3的<script setup>语法，导入的函数会自动暴露给模板，仅需修正导入拼写即可直接使用：

<template>
    <div>
       <p>{{ NormaliseData('test function') }}</p>
    </div>
</template>
<script setup>
import NormaliseData from "./NormaliseData";
</script>

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