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

Question

I'm a newbie in javascript and vue.js and I'm facing somme issue when trying to add a new function in an existing programme.

I have put my new function (with others) in a separate file:

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

Then I import the file in the component file and calling my function :

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

When the component is used, I get an error message

[Vue warn]: Property or method "MyFunction" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties .

I've read a lot of documentation and fail to understand why it doesn't work. Can anyone help me with this ??

Answer 1

You're exporting an object then in order to use the MyFunction you need to access to that function using dot notation, like this: MyFunctions.MyFunction("Please do some stuff !")

I made a working example for this use-case: https://codesandbox.io/s/62l1j19rvw

---

MyFunctions.js

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

---

Component

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

You can just import your javascript files into .vue files as long as they are inside <script> tags. Since Vue.js is after all javascript, the first part where you should look at while debugging is if you have some kind of mistake in your syntax. From what I see, there is some confusion with the import and export statements, which could be quite complex at first!

Check MDN's Documentation specially under named exports :

In the module, we could use the following

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

This way, in another script, we could have:

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

Answer 3

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

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