Załóżmy, że mam główną instancję Vue, która zawiera elementy potomne. Czy istnieje sposób wywołania metody należącej do jednego z tych komponentów spoza instancji Vue?
Oto przykład:
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>
Kiedy klikam przycisk wewnętrzny, increaseCount()
metoda jest powiązana ze zdarzeniem kliknięcia, więc zostaje wywołana. Nie ma możliwości powiązania zdarzenia z zewnętrznym przyciskiem, którego zdarzenia kliknięcia oczekuję za pomocą jQuery, więc będę potrzebować innego sposobu wywołania increaseCount
.
EDYTOWAĆ
Wygląda na to, że działa:
vm.$children[0].increaseCount();
Nie jest to jednak dobre rozwiązanie, ponieważ odwołuję się do komponentu według jego indeksu w tablicy potomnej, a przy wielu komponentach jest mało prawdopodobne, aby pozostał on stały, a kod jest mniej czytelny.
javascript
vue.js
harryg
źródło
źródło
Odpowiedzi:
W końcu zdecydowałem się na stosowanie dyrektywy Vue
ref
. Umożliwia to odwołanie do komponentu od rodzica w celu uzyskania bezpośredniego dostępu.Na przykład
Poproś o zarejestrowanie komponentu w mojej instancji nadrzędnej:
Renderuj komponent w szablonie / HTML z referencją:
Teraz gdzie indziej mogę uzyskać dostęp do komponentu na zewnątrz
Zobacz to skrzypce na przykład: https://jsfiddle.net/xmqgnbu3/1/
(stary przykład z wykorzystaniem Vue 1: https://jsfiddle.net/6v7y6msr/ )
źródło
vm
do niego ze względu na sposób, w jaki obejmuje on moduły. Możesz zrobić coś takiegowindow.app = vm
w swoimmain.js
. Źródło: forum.vuejs.org/t/how-to-access-vue-from-chrome-console/3606Od wersji Vue2 dotyczy to:
// w metodzie komponentu A.
// w utworzonym haku komponentu B.
Zobacz tutaj dokumenty Vue. A oto więcej szczegółów na temat tego, jak dokładnie skonfigurować tę magistralę zdarzeń.
Jeśli chcesz uzyskać więcej informacji o tym, kiedy korzystać z właściwości, zdarzeń i / lub scentralizowanego zarządzania stanem, przeczytaj ten artykuł .
źródło
bus
zmienna globalna , możesz pójść o krok dalej i wstrzyknąć magistralę do swojego komponentu za pomocą rekwizytów . Jestem stosunkowo nowy, aby vue, więc nie mogę cię zapewnić, że to idiomatyczne.Możesz użyć systemu zdarzeń Vue
i
Oto skrzypce: http://jsfiddle.net/hfalucas/wc1gg5v4/59/
źródło
Nieco inna (prostsza) wersja zaakceptowanej odpowiedzi:
Poproś o zarejestrowanie komponentu w instancji nadrzędnej:
Renderuj komponent w szablonie / HTML z referencją:
Uzyskaj dostęp do metody komponentu:
źródło
Możesz ustawić ref dla komponentów potomnych, a następnie w rodzicu możesz wywoływać za pomocą $ refs:
Dodaj odwołanie do komponentu potomnego:
Dodaj zdarzenie kliknięcia do elementu nadrzędnego:
źródło
Załóżmy, że masz element
child_method()
podrzędny:Teraz chcesz uruchomić
child_method
komponent nadrzędny:Jeśli chcesz wykonać metodę komponentu nadrzędnego z komponentu podrzędnego:
this.$parent.name_of_method()
UWAGA: Nie jest zalecane uzyskiwanie dostępu do elementu podrzędnego i nadrzędnego w ten sposób.
Zamiast tego, jako najlepszą praktykę, używaj Rekwizytów i wydarzeń do komunikacji rodzic-dziecko.
Jeśli chcesz komunikować się między komponentami, z pewnością użyj vuex lub magistrali zdarzeń
Przeczytaj ten bardzo pomocny artykuł
źródło
Jest to prosty sposób na uzyskanie dostępu do metod komponentu z innego komponentu
źródło
Oto prosty
źródło
Nie jestem pewien, czy to właściwa droga, ale ta działa dla mnie.
Najpierw zaimportuj komponent zawierający metodę, którą chcesz wywołać w komponencie
a następnie wywołać dowolną metodę MyCompenent
źródło
doSomething
używasz czegoś z danych, ta metoda jest bezużyteczna.Użyłem bardzo prostego rozwiązania. W wybranym przeze mnie komponencie Vue umieściłem element HTML, który wywołuje tę metodę, używając Vanilla JS i uruchamiam kliknięcie!
W komponencie Vue zamieściłem coś takiego:
Korzystam z Vanilla JS:
źródło