Je suis assez nouveau dans Vue / JS et j'essaie actuellement de créer une application.
J'ai actuellement un composant configuré comme suit (il y a évidemment plus à lui mais j'espère que ce qui suit aidera avec ma 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>
Maintenant, je suis capable d'utiliser Class1 à partir de method1 () mais y a-t-il un moyen pour appeler facilement method2 () depuis Class2?
Beaucoup merci d'avance.
4 Réponses :
Créez des Class1 et Class2 en dehors de votre composant en tant que classe ES6 et exportez-les. Importez ensuite les classes dans votre composant. Donc quelque chose comme ceci:
Classe 1
<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();
....
}
...
....
Classe 2
export default class Class2 {
...
...
}
Merci pour la réponse - comment dois-je appeler method2 depuis Class2?
Importez simplement class2 et appelez la classe, comme pour la classe 1. J'ai modifié ma réponse. De plus, vous appelez des méthodes dans data () . C'est faux. Les méthodes doivent être en dehors de date () .
Merci d'avoir signalé ma faute de frappe avec les méthodes à l'intérieur des données - question d'origine modifiée.
Classe avec la méthode foo comme exemple
import Class1 from './class1';
<template>...</template>
<script>
export default {
data() {
return {
methods: {
method1() {
const x = new Class1;
return x.foo()
}
}
}
}
}
</script>
L'appel d'une fonction depuis une autre classe pourrait ressembler à ceci:
export default class Class1 {
function foo() {};
}
Merci pour les réponses à tous - je pense que ma question initiale n'a pas dû être claire, mais j'ai réussi à trouver la solution (je suis tombé par hasard juste maintenant, après avoir passé des heures à chercher la nuit dernière!) La voici pour quiconque se demande.
p> Pour utiliser une méthode en dehors d'un composant, enregistrez l'instance de Vue globalement lors de sa création (par exemple dans main.js):
<template>...</template>
<script>
export default {
data() {
return {...}
},
methods: {
method1() {
const Class1 = new Class1;
},
method2() {
...
}
}
}
class Class1 {}
class Class2 {
App.method2();
}
</script>
<style>...</style>
Et puis toutes les méthodes peuvent être appelées en référençant la window.App par exemple
App.method2();
Code de travail complet:
app = new Vue({
...
})
window.App = app;
Publier une réponse plus élaborée: Dans vue.js, vous pouvez utiliser une méthode Event Bus pour communiquer avec des composants non liés. Il s'agit essentiellement d'un composant utilisé pour transmettre un événement à d'autres composants. Cela peut être très utile dans ce cas.
event-bus.js:
// 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! :)`)
});
Composant qui émettra l'événement:
<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>
Bonjour Jeff, je vous montre simplement une approche différente, dans vue.js, vous pouvez utiliser une méthode Event Bus. Il s'agit essentiellement d'un composant utilisé pour transmettre un événement à un autre composant. Cela peut être très utile dans ce cas: alligator.io/vuejs/global-event-bus < / a>
Oui, c'était exactement ce que je recherchais - un moyen d'envoyer des données dans les deux sens depuis Vue. Merci beaucoup! N'hésitez pas à poster comme réponse afin que je puisse marquer comme correcte.