Disons que j'ai une instance principale de Vue qui a des composants enfants. Existe-t-il un moyen d'appeler une méthode appartenant à l'un de ces composants depuis l'extérieur de l'instance de Vue?
Voici un exemple:
var vm = new Vue({
el: '#app',
components: {
'my-component': {
template: '#my-template',
data: function() {
return {
count: 1,
};
},
methods: {
increaseCount: function() {
this.count++;
}
}
},
}
});
$('#external-button').click(function()
{
vm['my-component'].increaseCount(); // This doesn't work
});
<script src="http://vuejs.org/js/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
<my-component></my-component>
<br>
<button id="external-button">External Button</button>
</div>
<template id="my-template">
<div style="border: 1px solid; padding: 5px;">
<p>A counter: {{ count }}</p>
<button @click="increaseCount">Internal Button</button>
</div>
</template>
Ainsi, lorsque je clique sur le bouton interne, la increaseCount()
méthode est liée à son événement click, elle est donc appelée. Il n'y a aucun moyen de lier l'événement au bouton externe, dont j'écoute l'événement click avec jQuery, j'ai donc besoin d'une autre façon d'appeler increaseCount
.
ÉDITER
Il semble que cela fonctionne:
vm.$children[0].increaseCount();
Cependant, ce n'est pas une bonne solution car je fais référence au composant par son index dans le tableau des enfants, et avec de nombreux composants, il est peu probable qu'il reste constant et le code est moins lisible.
la source
Réponses:
Au final, j'ai opté pour l'utilisation de la
ref
directive Vue . Cela permet à un composant d'être référencé à partir du parent pour un accès direct.Par exemple
Faire enregistrer un composant sur mon instance parent:
Rendez le composant dans template / html avec une référence:
Maintenant, ailleurs, je peux accéder au composant en externe
Voir ce violon pour un exemple: https://jsfiddle.net/xmqgnbu3/1/
(ancien exemple utilisant Vue 1: https://jsfiddle.net/6v7y6msr/ )
la source
vm
raison de la façon dont il étend les modules. Vous pouvez faire quelque chose commewindow.app = vm
dans votremain.js
. Source: forum.vuejs.org/t/how-to-access-vue-from-chrome-console/3606Depuis Vue2, cela s'applique:
// dans la méthode du composant A
// dans le crochet créé du composant B
Voir ici pour les documents Vue. Et voici plus de détails sur la façon de configurer exactement ce bus d'événements.
Si vous souhaitez plus d'informations sur l'utilisation des propriétés, des événements et / ou de la gestion centralisée des états, consultez cet article .
la source
bus
variable globale , vous pouvez aller plus loin et injecter le bus dans votre composant à l'aide d' accessoires . Je suis relativement nouveau en vue, donc je ne peux pas vous assurer que c'est idiomatique.Vous pouvez utiliser le système d'événement Vue
et
Voici le violon: http://jsfiddle.net/hfalucas/wc1gg5v4/59/
la source
Une version légèrement différente (plus simple) de la réponse acceptée:
Avoir un composant enregistré sur l'instance parent:
Rendez le composant dans template / html avec une référence:
Accédez à la méthode des composants:
la source
Vous pouvez définir la référence pour les composants enfants, puis dans le parent, vous pouvez appeler via $ refs:
Ajouter une référence au composant enfant:
Ajouter un événement de clic au parent:
la source
Supposons que vous ayez un
child_method()
dans le composant enfant:Vous voulez maintenant exécuter le
child_method
composant parent parent:Si vous souhaitez exécuter une méthode de composant parent à partir du composant enfant:
this.$parent.name_of_method()
REMARQUE: il n'est pas recommandé d'accéder au composant enfant et parent comme ceci.
Au lieu de cela, comme meilleure pratique, utilisez les accessoires et les événements pour la communication parent-enfant.
Si vous voulez une communication entre les composants, utilisez sûrement vuex ou bus d'événements
Veuillez lire cet article très utile
la source
Il s'agit d'un moyen simple d'accéder aux méthodes d'un composant à partir d'un autre composant
la source
En voici un simple
la source
Je ne sais pas si c'est la bonne façon, mais celle-ci fonctionne pour moi.
Importez d'abord le composant qui contient la méthode que vous souhaitez appeler dans votre composant
puis appelez n'importe quelle méthode de MyCompenent
la source
doSomething
utilisez quelque chose de données, cette méthode est inutile.J'ai utilisé une solution très simple. J'ai inclus un élément HTML, qui appelle la méthode, dans mon composant Vue que je sélectionne, en utilisant Vanilla JS, et je déclenche un clic!
Dans le composant Vue, j'ai inclus quelque chose comme ceci:
Que j'utilise avec Vanilla JS:
la source