Vue.js: импортировать класс с функцией и вызывать его в дочернем компоненте

Question

У меня есть компонент my-parent. В этом компоненте я использую дочерний компонент my-child и импортирую внешний класс MyClass с собственной функцией exportedFunction. Я пытался использовать это решение: VueJS обращается к внешне импортированному методу в компоненте vue

В основном я использую mounted и имя функции из импортируемого класса. В methods я определил новый метод, который вызывает смонтированный метод из импортированного класса. Затем я передаю созданный метод как свойство своему дочернему элементу, где я пытаюсь вызвать функцию с @click и передать туда параметр.

Вот мой код:

my-parent шаблон:

<template>
    <my-child :exportedFunction="callFunction"></my-child>
</template>

<script>
import MyClass from './MyClass';

export default {
    mounted() {
        exportedFunction()
    },
    methods: {
        callFunction() {
            exportedFunction()
        }
    }
}
</script>

my-child шаблон:

<template>
    <button @click="exportedFunction('hello world!')">Click me!</button>
</template>

<script>
export default {
    props: ['exportedFunction']
}
</script>

MyClass код:

export default class MyClass {
    exportedClass(parameter) {
        console.log(parameter) // expected 'hello world' from child
    }
}

Надеюсь на помощь!

Answer 1

Я бы отказался от вашего MyClass компонента и вместо этого имел бы:

my-parent

<template>
    <my-child :triggerEvent="callFunction"></my-child>
</template>

<script>
export default {
    methods: {
        callFunction() {
          console.log('hello');
        }
    }
}
</script>

my-child

<template>
    <button @click="$emit('triggerEvent')">Click me!</button>
</template>

Как вы хотите использоватьMyClass в вашем примере вы можете оставить все как есть и иметь my-parent как:

<template>
  <my-child :triggerEvent="callFunction"/>
</template>

<script>
import MyChild from "./MyChild";
import MyClass from "./MyClass.js";

export default {
  components: {
    MyChild
  },
  data() {
    return {
      myCls: new MyClass()
    };
  },
  mounted() {
    this.myCls.exportedClass("hello my class");
  },
  methods: {
    callFunction() {
      console.log("hello");
    }
  }
};
</script>