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

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 function。

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

Answer 1

您可以将 function 导出为 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
  }
}

Answer 2

不能直接导入方法并在 vue 中的模板上使用。 您只能使用在方法 object 部分中定义的函数。 但是如果你想让它成为全球性的，你可以使用下面的插件。

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
   render: (h) => h(App)
}).$mount("#app");

const MyPlugin = {
   install(Vue, options) {
      Vue.prototype.addNumbers = (a, b) => {
        return a + b;
      };
   }
};
Vue.use(MyPlugin);

然后可以直接调用模板中的function

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

<script>
export default {
   name: 'HelloWorld',
   methods: {
   }
}
</script>