Untergeordnete Komponente zur Verwendung der Elternfunktion in vue js

Question

Ich habe eine Methode initialisiert innerhalb der übergeordneten Komponente namens setMessage() und ich würde gerne in der Lage sein, es innerhalb der Kindkomponente zu nennen.

main.js

const messageBoard = new Vue({ 
    el: '#message-board', 
    render: h => h(App), 
}) 

App (App.vue (parent)) ..

export default { 
    data() { 
     return { messages: state } 
    }, 
    methods: { 
     setMessage(message) { 
      console.log(message); 
     } 
    }, 
    template: ` 
     <div> 
      <child-component></child-component> 
     </div> 
    `, 
} 

Kind

const child = Vue.extend({ 
    mounted() { 
     // attempting to use this function from the parent 
     this.$dispatch('setMessage', 'HEY THIS IS MY MESSAGE!'); 
    } 
}); 
Vue.component('child-component', child); 

Gerade jetzt this.$dispatch is not a function Fehlermeldung Ich erhalte. Was mache ich falsch? Wie kann ich Elternfunktionen in verschiedenen untergeordneten Komponenten verwenden? Ich habe auch versucht $emit, es wirft keinen Fehler & es trifft nicht die Funktion.

Vielen Dank für Ihre Hilfe im Voraus!

Answer 1

Sie haben ein paar Optionen.

Option 1 - Referenzierung $ parent von Kind

Die einfachste ist this.$parent von Ihrem Kind Komponente zu verwenden. Etwas wie folgt aus:

const Child = Vue.extend({ 
    mounted() { 
    this.$parent.setMessage("child component mounted"); 
    } 
}) 

Option 2 - Emission eines Ereignisses und der Handhabung in Mutter

Aber die stark Paare das Kind seine Eltern. Um dies zu beheben, könnten Sie ein Ereignis in das untergeordnete Element $emit einfügen und es von dem übergeordneten Element behandeln lassen. Wie folgt aus:

const ChildComponent = Vue.extend({ 
    mounted() { 
    this.$emit("message", "child component mounted (emitted)"); 
    } 
}) 

// in the parent component template 
<child-component @message="setMessage"></child-component> 

Option 3 - zentrales Ereignis Bus

Eine letzte Option, wenn Ihre Komponenten keine direkten Eltern-Kind-Beziehung haben, ist eine separate Vue Instanz als zentrales zu verwenden Ereignisbus as described in the Guide. Es würde wie folgt aussehen:

const bus = new Vue({}); 

const ChildComponent = Vue.extend({ 
    mounted() { 
    bus.$emit("message-bus", "child component mounted (on the bus)"); 
    } 
}) 

const app = new Vue({ 
    ... 
    methods: { 
    setMessage(message) { 
     console.log(message); 
    } 
    }, 
    created() { 
    bus.$on('message-bus', this.setMessage) 
    }, 
    destroyed() { 
    bus.$off('message-bus', this.setMessage) 
    } 
}); 

Update (Option 2a) - vorbei setMessage als Stütze

Um auf Ihrem Kommentar zu folgen, ist hier, wie es setMessage das Kind Komponente passieren könnte funktionieren als prop:

const ChildComponent = Vue.extend({ 
    props: ["messageHandler"], 
    mounted() { 
    this.messageHandler('from message handler'); 
    } 
}) 

// parent template (note the naming of the prop) 
<child-component :message-handler="setMessage"></child-component>