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”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保在data选项中或对于基于类的组件，此属性都是反应性的。参见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

我已经阅读了很多文档，但无法理解为什么它不起作用。谁能帮我这个？？

Answer 1

您只需将JavaScript文件导入.vue文件中即可，只要它们位于<script>标记内即可。由于 Vue.js 毕竟是JavaScript，因此在调试时应该看的第一部分是语法是否有误。从我看来，import和export语句有些混淆，起初可能会很复杂！

特别在MDN's Documentation下检查named exports：

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

// 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

Answer 2

您要导出对象，然后才能使用MyFunction，您需要使用点表示法访问该函数，例如：MyFunctions.MyFunction("Please do some stuff !")

我为此用例制作了一个可行的示例：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>

Answer 3

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

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

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

3 个答案: