I have a component called my-parent. Within this component, I am utilizing a child component named my-child and importing an external class known as MyClass, which includes its own function called exportedFunction. I attempted to implement the solution outlined in this thread: VueJS accessing externally imported method in vue component
In essence, what I have done is used the mounted lifecycle hook along with the referenced function from the imported class. Additionally, within the methods section, I defined a new method that invokes the mounted function from the imported class. Following this, I passed the created method as a property to my child component, where I then attempted to invoke the function using a @click event and passing a parameter.
Below is the current state of my code:
my-parent template:
<template>
<my-child :exportedFunction="callFunction"></my-child>
</template>
<script>
import MyClass from './MyClass';
export default {
mounted() {
exportedFunction()
},
methods: {
callFunction() {
exportedFunction()
}
}
}
</script>
my-child template:
<template>
<button @click="exportedFunction('hello world!')">Click me!</button>
</template>
<script>
export default {
props: ['exportedFunction']
}
</script>
MyClass code:
export default class MyClass {
exportedClass(parameter) {
console.log(parameter) // expected 'hello world' from child
}
}
Any assistance would be greatly appreciated!