Appelez une méthode de composant Vue JS à partir de l'extérieur du composant

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 de l'extérieur de l'instance 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> 

Donc, lorsque je clique sur le bouton interne, la méthode increaseCount() est liée à son événement de clic afin qu'il soit appelé. Il n'y a aucun moyen de lier l'événement au bouton externe, à l'événement de clic que j'écoute avec jQuery, alors j'ai besoin d'une autre façon d'appeler increaseCount .

• Comment gérer les entités en forme d'arbre dans les réducteurs Redux?
• Problèmes conceptuels avec IndexedDB (relations etc.)
• Détecter un shake dans iOS Safari avec Javascript?
• Canvas vs SVG pour des jeux simples
• Expliquez pourquoi et comment + nouvelle Date (); Fonctionne comme «solution de contournement» pour Date.now () dans IE8 ou ci-dessous

MODIFIER

Il semble que cela fonctionne:

 vm.$children[0].increaseCount(); 

Cependant, ce n'est pas une bonne solution parce que je fais référence au composant par son index dans le tableau des enfants, et avec de nombreux composants, il est peu probable que cela reste constant et que le code soit moins lisible.

• Comment détecter le geste manuel en webcam en direct avec javascript?
• Jquery Timeline plugins
• Comment obtenir un symbole de devise spécifique (symbole de roupie dans mon cas) dans js angulaires au lieu de l'option par défaut (Dollar $ symbol)
• Comment changer dynamiquement jQuery Datatables hauteur
• Cross-Origin Resource Sharing (CORS) – est-ce que je manque quelque chose ici?

 var vm = new Vue({ el: '#app', components: { myComponent: 'my-component' } }); 

 <my-component ref="foo"></my-component> 

 <script> vm.$refs.foo.doSomething(); //assuming my component has a doSomething() method </script> 

 vm.$broadcast('event-name', args) 

  vm.$on('event-name', function())