Calling a method inside Vue component from an outside class

Question

I'm pretty new to Vue/JS and am currently trying to build an app.

I currently have a component set up as follows (there's obviously more to it but hopefully the below will help with my question):

<template>...</template>
<script>
 export default {
  data() {
   return {...}
  },
  methods: {
   method1() {
    const Class1 = new Class1;
   },
   method2() {
    ...
   }
  }
 }
 class Class1 {}
 class Class2 {
  ...want to use above method2() here
 }
</script>
<style>...</style>

Now I am able to use Class1 from inside method1() but is there any way I can easily call method2() from Class2?

Many thanks in advance.

Answer 1

Posting a better elaborated answer: In vue.js you can use an Event Bus method to comunicate with unrelated components. Basically is a component that is used to pass an event to other components. It can be very useful in this case.

event-bus.js:

import Vue from 'vue';
export const EventBus = new Vue();

Component that will emit the event:

<template>
  <div @click="functionToEmitTheEvent()"></div>
</template>

<script>
// Import the EventBus we just created.
import { EventBus } from './event-bus.js';

export default {
  data() {
    return {
      clickCount: 0
    }
  },

  methods: {
    functionToEmitTheEvent() {
      this.clickCount++;
      // Send the event on a channel (customClick) with a payload (the click count.)
      EventBus.$emit('customClick', this.clickCount);
    }
  }
}
</script>

Script that will listen the event:

// Import the EventBus.
import { EventBus } from './event-bus.js';

// Listen for the customClick event and its payload.
EventBus.$on('customClick', clickCount => {
  console.log(`Oh, that's nice. It's gotten ${clickCount} clicks! :)`)
});

All code written was copied from here: https://alligator.io/vuejs/global-event-bus/

I hope it helped!

Answer 2

Thanks for the answers all - think my original question must not have been clear but I've managed to find the solution (stumbled across just now, after spending hours last night searching!) Here it is for anyone else wondering.

To make use of a method outside of a component, register the Vue instance globally when created (e.g. in main.js):

app = new Vue({
 ...
})
window.App = app;

And then any methods can be called by referencing the window.App e.g.

App.method2();

Full working code:

<template>...</template>
<script>
 export default {
  data() {
   return {...}
  },
  methods: {
   method1() {
    const Class1 = new Class1;
   },
   method2() {
    ...
   }
  }
 }
 class Class1 {}
 class Class2 {
  App.method2();
 }
</script>
<style>...</style>

Answer 3

Class with method foo as an example

  export default class Class1 {
    function foo() {};
}

Calling a function from another class could be like this:

import Class1 from './class1';
    <template>...</template>
    <script>
     export default {
      data() {
       return {
        methods: {
         method1() {
          const x = new Class1;
          return x.foo()
         }
        }
       }
      }
     }
    </script>

Answer 4

Create Class1 and Class2 outside of your component as a ES6 class and export them. Then import the classes to your component. So something like this:

Class 1

export default class Class1 {
  ...  
  ...
}

Class 2

export default class Class2 {
  ...  
  ...
}

And then import those classes to your Vue component

<template>...</template>
<script>
 import Class1 from './class1';
 import Class2 from './class2';

 export default {
  ...
 data() {
   return {
      // your data
   }
 },
 methods: {
     method1() {
      const Class1 = new Class1();
     },
     method2() {
      const Class2 = new Class2();
      ..
      return 'something';
     },
     method3() {
        // call method 2
        method2();
        ....
     }
  ...
  ....