Angenommen, ich habe eine Haupt-Vue-Instanz mit untergeordneten Komponenten. Gibt es eine Möglichkeit, eine Methode, die zu einer dieser Komponenten gehört, vollständig von außerhalb der Vue-Instanz aufzurufen?
Hier ist ein Beispiel:
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>
Wenn ich also auf die interne Schaltfläche klicke, ist die increaseCount()
Methode an ihr Klickereignis gebunden, sodass sie aufgerufen wird. Es gibt keine Möglichkeit, das Ereignis an die externe Schaltfläche zu binden, deren Klickereignis ich mit jQuery abhöre. Daher benötige ich eine andere Möglichkeit zum Aufrufen increaseCount
.
BEARBEITEN
Es scheint, dass dies funktioniert:
vm.$children[0].increaseCount();
Dies ist jedoch keine gute Lösung, da ich die Komponente anhand ihres Index im untergeordneten Array referenziere. Bei vielen Komponenten ist es unwahrscheinlich, dass dies konstant bleibt und der Code weniger lesbar ist.
quelle
Antworten:
Am Ende habe ich mich für die
ref
Anweisung von Vue entschieden . Dadurch kann eine Komponente vom übergeordneten Element für den direkten Zugriff referenziert werden.Z.B
Haben Sie eine Komponente in meiner übergeordneten Instanz registriert:
Rendern Sie die Komponente in template / html mit einer Referenz:
Jetzt kann ich an anderer Stelle extern auf die Komponente zugreifen
Ein Beispiel finden Sie in dieser Geige: https://jsfiddle.net/xmqgnbu3/1/
(altes Beispiel mit Vue 1: https://jsfiddle.net/6v7y6msr/ )
quelle
vm
aufgrund des Umfangs der Module nicht darauf zugreifen . Sie können so etwas wiewindow.app = vm
in Ihrem tunmain.js
. Quelle: forum.vuejs.org/t/how-to-access-vue-from-chrome-console/3606Seit Vue2 gilt dies:
// in der Methode von Komponente A.
// im erstellten Hook von Komponente B.
Sehen Sie hier für die Vue docs. Und hier erfahren Sie mehr darüber, wie Sie diesen Eventbus genau einrichten.
Weitere Informationen zur Verwendung von Eigenschaften, Ereignissen und / oder zentraler Statusverwaltung finden Sie in diesem Artikel .
quelle
bus
Variable nicht mögen , können Sie einen Schritt weiter gehen und den Bus mithilfe von Requisiten in Ihre Komponente einfügen . Ich bin relativ neu in Vue, daher kann ich Ihnen nicht versichern, dass dies idiomatisch ist.Sie können das Vue-Ereignissystem verwenden
und
Hier ist die Geige: http://jsfiddle.net/hfalucas/wc1gg5v4/59/
quelle
Eine etwas andere (einfachere) Version der akzeptierten Antwort:
Lassen Sie eine Komponente auf der übergeordneten Instanz registrieren:
Rendern Sie die Komponente in template / html mit einer Referenz:
Greifen Sie auf die Komponentenmethode zu:
quelle
Sie können ref für untergeordnete Komponenten festlegen und dann in parent über $ refs aufrufen:
Ref zur untergeordneten Komponente hinzufügen:
Klickereignis zum übergeordneten Element hinzufügen:
quelle
Angenommen, Sie haben eine
child_method()
in der untergeordneten Komponente:Jetzt möchten Sie die
child_method
übergeordnete Komponente ausführen :Wenn Sie eine übergeordnete Komponentenmethode aus einer untergeordneten Komponente ausführen möchten:
this.$parent.name_of_method()
HINWEIS: Es wird nicht empfohlen, auf die untergeordnete und übergeordnete Komponente wie folgt zuzugreifen.
Verwenden Sie stattdessen als Best Practice Props & Events für die Eltern-Kind-Kommunikation.
Wenn Sie zwischen Komponenten kommunizieren möchten, verwenden Sie sicher Vuex oder Event Bus
Bitte lesen Sie diesen sehr hilfreichen Artikel
quelle
Dies ist eine einfache Möglichkeit, von einer anderen Komponente aus auf die Methoden einer Komponente zuzugreifen
quelle
Ich bin mir nicht sicher, ob es der richtige Weg ist, aber dieser funktioniert für mich.
Importieren Sie zuerst die Komponente, die die Methode enthält, die Sie in Ihrer Komponente aufrufen möchten
und rufen Sie dann eine beliebige Methode von MyCompenent auf
quelle
Hier ist eine einfache
quelle
Ich habe eine sehr einfache Lösung verwendet. Ich habe ein HTML-Element, das die Methode aufruft, in meine Vue-Komponente aufgenommen, die ich mit Vanilla JS auswähle, und ich löse einen Klick aus!
In die Vue-Komponente habe ich Folgendes eingefügt:
Dass ich mit Vanilla JS benutze:
quelle