Rufen Sie einen Vue.js "Komponenten" - Methode, die von außerhalb der Komponente

Am Ende entschied ich mich für die Verwendung Vue ist ref - Direktive. Dies ermöglicht eine Komponente verwiesen werden, die von den Eltern für den direkten Zugriff.

E. g.

Haben eine compenent-eingetragen auf meinem übergeordnete Instanz:

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

Rendern der Komponente im template/html-Referenz:

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

Nun, sonst kann ich Zugriff auf die Komponente extern

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

Sehen, diese Geige für ein Beispiel: https://jsfiddle.net/xmqgnbu3/1/

(altes Beispiel mit Vue 1: https://jsfiddle.net/6v7y6msr/)

Seit Vue2 dies gilt:

var bus = new Vue()

//in der Komponente Eine Methode

bus.$emit('id-selected', 1)

//in Komponente B erstellt hook

bus.$on('id-selected', function (id) {

  //...
})

Sehen hier für die Vue-docs.
Und hier ist mehr detail auf, wie diese event-bus genau.

Wenn Sie möchten mehr info, wenn Sie mit den Eigenschaften, Ereignissen und/oder die zentralisierte Staatliche Verwaltung sehen dieser Artikel.

Eine etwas andere (einfachere) version der akzeptierten Antwort:

Haben eine Komponente registriert, die auf das übergeordnete Instanz:

export default {
    components: { 'my-component': myComponent }
}

Rendern der Komponente im template/html-Referenz:

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

Zugriff auf die Komponente Methode:

<script>
    this.$refs.foo.doSomething();
</script>

Sagen, Sie haben eine child_method() in der untergeordneten Komponente:

export default {
    methods: {
        child_method () {
            console.log('I got clicked')
        }
    }
}

Nun möchten Sie zum ausführen der child_method von der übergeordneten Komponente:

<template>
    <div>
        <button @click="exec">Execute child component</button>
        <child-cmp ref="child"></child_cmp> <!-- note the ref="child" here -->
    </div>
</template>

export default {
    methods: {
        exec () { //accessing the child component instance through $refs
            this.$refs.child.child_method() //execute the method belongs to the child component
        }
    }
}

Wenn Sie ausführen möchten, eine übergeordnete Komponente die Methode von Kind Komponente:

this.$parent.name_of_method()

HINWEIS: Es wird nicht empfohlen, um Zugriff auf die untergeordneten und der übergeordneten Komponente wie diese.

Statt als best-practice-Einsatz von Requisiten & Veranstaltungen für Eltern-Kind-Kommunikation.

Wenn Sie möchten, dass die Kommunikation zwischen den Komponenten sicher verwenden vuex oder event-bus

Bitte Lesen Sie diese sehr hilfreich Artikel

Benutzt habe ich eine sehr einfache Lösung. Ich habe ein HTML-element, das die Methode aufruft, in meinem Vue-Komponente, die ich wählen, mit Vanilla JS, und ich den Auslöser klicken!

In der Vue-Komponente, ich habe auch so etwas wie die folgenden:

<span data-id="btnReload" @click="fetchTaskList()"><i class="fa fa-refresh"></i></span>

Dass ich mit Vanilla JS:

const btnReload = document.querySelector('[data-id="btnReload"]');
btnReload.click();