link137 link138 link139 link140 link141 link142 link143 link144 link145 link146 link147 link148 link149 link150 link151 link152 link153 link154 link155 link156 link157 link158 link159 link160 link161 link162 link163 link164 link165 link166 link167 link168 link169 link170 link171 link172 link173 link174 link175 link176 link177 link178 link179 link180 link181 link182 link183 link184 link185 link186 link187 link188 link189 link190 link191 link192 link193 link194 link195 link196 link197 link198 link199 link200 link201 link202 link203 link204 link205 link206 link207 link208 link209 link210 link211 link212 link213 link214 link215 link216 link217 link218 link219 link220 link221 link222 link223 link224 link225 link226 link227 link228 link229 link230 link231 link232 link233 link234 link235 link236 link237 link238 link239 link240 link241 link242 link243 link244 link245 link246 link247 link248 link249 link250 link251 link252 link253 link254 link255 link256 link257 link258 link259 link260 link261 link262 link263 link264 link265 link266 link267 link268 link269 link270 link271 link272 link273

[Vue.js] Calling a method inside Vue component from an outside class

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 {
method2();
}
</script>
<style>…</style>

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

Many thanks in advance.

Solution :

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.js 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!

Solution 2:

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

Class 1

export default class Class1 {


}

Class 2

export default class Class2 {


}

And then import those classes to the vue.js component

<template>…</template>
<script>
import Class1 from ‘./class1’;
import Class2 from ‘./class2’;

export default {

data() {
return {
// the data
}
},
methods: {
method1() {
const Class1 = new Class1();
},
method2() {
const Class2 = new Class2();
..
return ‘something’;
},
method3() {
// call method 2
method2();
….
}

….

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

Solution 4:

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