Vue.js: Import class with function and call it in child component

Question

I have a component my-parent. In this component, I use a child component my-child and import an external class MyClass with an own function exportedFunction. I tried to use this solution: VueJS accessing externaly imported method in vue component

Basiclly, I use mounted and the name of the function from the imported class. In methods I defined a new method, which calls the mounted one from the imported class. Than I pass the created method as property to my child, where I try to call the function with a @click and pass the parameter there.

Here is my code so far:

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

Hope for some help!

Is there any reason why in the child component you don't emit an event for which you listen in your parent component and trigger the method there? — Manu
– Manu, Commented May 24, 2019 at 13:18
@Manu Since I'm really a newbie with Vue.Js didn't know, that there is such a way. How could I do it in this example? — webta.st.ic
– webta.st.ic, Commented May 24, 2019 at 13:22

Manu · Accepted Answer · 2019-05-24 14:03:19Z

3

I would ditch your MyClass component and instead have:

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>

As you want to use MyClass in your example you can keep it as is and have my-parent as:

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

edited May 24, 2019 at 14:03

answered May 24, 2019 at 13:27

Manu

1,6723 gold badges18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Manu Over a year ago

Also, make sure you import your my-child component in your my-parent component

webta.st.ic Over a year ago

Thx! But I have to use the MyClass with the function. So can I call the function in MyClass from the parent component? So I would emit the call from the child and call the function in MyClass from the parent componet? Would this be possible?

Manu Over a year ago

Do you plan on reusing MyClass? If so, we can use a mixin. Just curious to find out what the use of that will be.

Manu Over a year ago

@MrBuggy, I've updated my answer to make use of MyClass. It would be good to understand the reasoning behind it as you may want to use a mixin - for best practices.

Manu Over a year ago

@MrBuggy, alright, makes sense, the above should work for what you need.

|

Collectives™ on Stack Overflow

Vue.js: Import class with function and call it in child component

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related