VueJS - 直接从模板调用外部JS文件中的函数

Question

假设在 VueJS 项目中，我有一个如下所示的 HelloWorld.js 文件：

export default {
addNumbers: function (a,b) {
    return a+b;
    }
}

它在 HelloWorld.vue 中的使用如下：

<template>
  <div>
    <h1>{{addNumbers(1,2)}}</h1>
  </div>
</template>

<script>
import helloWorldJS from './HelloWorld.js'

export default {
  name: 'HelloWorld',
  methods: {
    addNumbers: function(a,b) {
      return helloWorldJS.addNumbers(a,b);
    }
  }
}
</script>

我的痛苦来自于必须在 HelloWorld 组件的方法部分中“复制” addNumbers 函数。

有没有一种简单的方法可以使外部 addNumbers 函数从模板部分可用？

Answer 1

你可以导出为 const 你的功能如下：

export const addNumbers = (a,b) => a+b;

然后在你的 vue 文件中你可以写成：

import { addNumbers }  from './HelloWorld.js'

export default {
  name: 'HelloWorld',
  methods: {
    addNumbers // this is equal to addNumbers: addNumbers
  }
}