Aufruf übergeordnete Methode mit Komponente

Question

Ich habe eine Komponente und möchten einen Klick-Listener hinzufügen, der eine Methode in der übergeordneten Vorlage in Vue ausführt. Ist das möglich?

<template> 
    <custom-element @click="someMethod"></custom-element> 
</template> 

<script> 
    export default { 
     name: 'template', 
     methods: { 
      someMethod: function() { 
       console.log(true); 
     } 
    } 
</script> 

Answer 1

Direkt von der Vue-Dokumentation (https://vuejs.org/v2/guide/components.html#Composing-Components):

In Vue, the parent-child component relationship can be summarized as props down, events up. The parent passes data down to the child via props, and the child sends messages to the parent via events...

So benötigen Sie einen click Ereignis von Ihrem Kind Komponente emittieren, wenn etwas passiert, die dann zum Aufrufen einer Methode verwendet werden in Ihrer Elternvorlage.

Wenn Sie nicht explizit ein Ereignis aus dem Kind abgeben wollen (this.$emit('click') von Ihrem Kind Komponente verwenden), können Sie auch versuchen, ein native Click-Ereignis zu verwenden, @click.native="someMethod" (docs: https://vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components)

Answer 2

Sie können Übergeben Sie entweder die übergeordnete Methode an die untergeordnete Komponente über props, oder Sie können die unterordnete Komponente dazu veranlassen, entweder ein benutzerdefiniertes oder systemeigenes Ereignis auszugeben.

Hier ist ein Plunker, beide Ansätze zu demonstrieren.

Answer 3

Ja!

Es ist möglich, eine Elternmethode von einem Kind anzurufen, und es ist sehr einfach.

Jede Vue-Komponente definiert die Eigenschaft $parent. Über diese Eigenschaft können Sie dann jede Methode aufrufen, die im übergeordneten Objekt vorhanden ist. Hier

ist ein JSFiddle, das tut es: https://jsfiddle.net/50qt9ce3/1/

<script src="https://unpkg.com/vue"></script> 

<template id="child-template"> 
    <span @click="someMethod">Click me!</span> 
</template> 

<div id="app"> 
    <child></child> 
</div> 

<script> 
Vue.component('child', { 
    template: '#child-template', 
    methods: { 
    someMethod(){ 
     this.$parent.someMethod(); 
    } 
    } 
}); 

var app = new Vue({ 
    el: '#app', 
    methods: { 
    someMethod(){ 
     alert('parent'); 
    } 
    } 
}); 
</script> 

Hinweis: Während es ist nicht empfehlenswert, diese Art der Sache zu tun, wenn Sie getrennt wiederverwendbare Komponenten bauen werden, manchmal bauen wir damit verbundenen nicht wiederverwendbar Komponente und in diesem Fall ist es sehr praktisch.