Как импортировать внешнюю функцию в компонент Vue?

Я новичок в javascript и vue.js, и я столкнулся с проблемой somme при попытке добавить новую функцию в существующую программу.

Я поместил свою новую функцию (с другими) в отдельный файл:

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 warn]: свойство или метод «MyFunction» не определен в экземпляре, но упоминается во время рендеринга. Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство. См. Https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties .

Я прочитал много документации и не понимаю, почему это не работает. Кто-нибудь может мне с этим помочь ??

Всего 3 ответа


Затем вы экспортируете объект, чтобы использовать 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>

то, что вы экспортируете, является объектом, и то, что вы используете, является полем / методом внутри этого объекта, поэтому вам нужно использовать свою функцию следующим образом:

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

Вы можете просто импортировать файлы javascript в файлы .vue если они находятся внутри тегов <script> . Поскольку 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