如何在Vue组件中导入外部函数？

Question

我是JavaScript和Vue.js的新手，在尝试向现有程序中添加新功能时遇到了一些问题。

我已经将我的新功能（以及其他功能）放在一个单独的文件中：

export const MyFunctions = {
MyFunction: function(param) {
    // Doing stuff
}
}

然后我在组件文件中导入该文件并调用我的函数:

<script>
    import {MyFunctions} from "@/components/MyFunctions.js";
    export default {
        name:"Miniature",
        computed: {
            useMyFunction() {
                MyFunction("Please do some stuff !");
            }
        }
    }
</script>

当组件被使用时，我收到一个错误消息。

[Vue警告]: 在实例渲染期间引用的属性或方法"MyFunction"在实例上未定义。确保此属性是响应式的，可以在数据选项中声明，也可以对于基于类的组件，通过初始化该属性来实现。请参见: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

我已经阅读了很多文档，但不明白为什么它不起作用。有人能帮我吗？？

- MrFernand

---

你正在导入 MyFunctions，但是你的错误信息却显示 changeFavicon。 - A. L

使用MyFunctions.MyFunction("请做一些事情！")更新代码。 - Vaibhav Tamuche

Answer 1

你正在导出一个对象，为了使用 MyFunction 函数，你需要使用点号表示法访问该函数，例如：MyFunctions.MyFunction("请做一些事情！")

我为这个用例创建了一个工作示例：https://codesandbox.io/s/62l1j19rvw

---

MyFunctions.js

export const MyFunctions = {
  MyFunction: function(param) {
    alert(param);
  }
};

组件

<template>
  <div class="hello">
   {{msg}}
   <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
import {MyFunctions} from "../MyFunctions.js";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  methods:{
    handleClick: function(){
      MyFunctions.MyFunction("Please do some stuff !");
    }
  }
};
</script>

- You Nguyen

---

刚刚偶然看到了这个答案，虽然它能够工作，但是我遇到了一些错误，不知道该怎么办 - -在渲染期间引用了实例上未定义的属性或方法“handleClick”。 和 -事件“click”的处理程序无效：得到了未定义。 - KJParker

Answer 2

只要在<script>标签中，你就可以将自己的 JavaScript 文件导入到.vue文件中。由于Vue.js本质上就是JavaScript，所以在调试时应该首先检查语法是否有误。从我所看到的情况来看，可能会对import和export语句感到困惑，这在一开始可能会相当复杂！

请查看MDN文档，特别是命名导出部分：

在模块中，我们可以使用以下内容

// module "my-module.js"
function cube(x) {
  return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
var graph = { /* nice big object */ }
export { cube, foo, graph };

这样，在另一个脚本中，我们可以这样写：

import { cube, foo, graph } from 'my-module';
// Use your functions wisely

- nicoramirezdev

Answer 3

你导出的是一个对象，你使用的是该对象内部的一个字段/方法，因此你需要按照以下方式使用你的函数：

MyFunctions.MyFunction("Please do some stuff !");

- Jerry