VueJS如何直接从模板调用外部JS函数，避免重复定义？

嘿，这个问题我之前也碰到过，重复定义方法确实挺冗余的，给你整理了几个简便的方案，直接就能让外部的addNumbers函数在模板里调用：

方案1：将外部模块挂载到组件实例 #

你可以直接把导入的helloWorldJS挂载到组件的data或者实例属性上，这样模板就能通过实例直接访问外部方法：

<template>
  <div>
    <h1>{{ helloWorldJS.addNumbers(1,2) }}</h1>
  </div>
</template>
<script>
import helloWorldJS from './HelloWorld.js'
export default {
  name: 'HelloWorld',
  data() {
    return {
      helloWorldJS // 直接把外部对象注入到组件数据中
    }
  }
}
</script>

如果不想把它放到data里，也可以在组件生命周期钩子中直接挂载到实例：

<script>
import helloWorldJS from './HelloWorld.js'
export default {
  name: 'HelloWorld',
  created() {
    this.helloWorldJS = helloWorldJS
  }
}
</script>

两种方式的模板调用语法完全一致，都不需要重复定义方法。

方案2：用展开运算符合并到组件methods #

如果不想在模板里写前缀，想直接像原来那样调用addNumbers，可以用ES6的对象展开运算符，把外部模块的所有方法一次性合并到组件的methods中：

<template>
  <div>
    <h1>{{ addNumbers(1,2) }}</h1>
  </div>
</template>
<script>
import helloWorldJS from './HelloWorld.js'
export default {
  name: 'HelloWorld',
  methods: {
    ...helloWorldJS // 展开外部对象，把所有方法导入到组件methods
  }
}
</script>

这个方案特别适合外部模块包含多个方法的场景，一次性完成所有方法的导入，完全省去重复定义的麻烦。

方案3：全局注册（多组件复用场景） #

如果这个addNumbers函数需要在多个组件中使用，你可以把它注册到Vue的全局原型上，这样所有组件都能直接调用：
首先在项目入口文件（比如main.js）中注册：

import Vue from 'vue'
import helloWorldJS from './HelloWorld.js'

// 注册到全局原型，建议加$前缀避免命名冲突
Vue.prototype.$addNumbers = helloWorldJS.addNumbers

之后在任意组件的模板中直接调用：

<template>
  <div>
    <h1>{{ $addNumbers(1,2) }}</h1>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld'
}
</script>

注意：这个方法只推荐给真正需要全局复用的工具函数，避免过度使用导致全局命名空间污染。

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