Wie Requisiten mit Slots von Eltern zu Kind übergeben -vuejs

Question

Ich habe eine übergeordnete Komponente und eine untergeordnete Komponente.

Die Vorlage der übergeordneten Komponente verwendet einen Steckplatz, sodass eine oder mehrere untergeordnete Komponenten innerhalb des übergeordneten Elements enthalten sein können.

Die Kindkomponente enthält eine Stütze, die "Signal" genannt wird.

Ich würde gerne in der Lage sein, Daten mit dem Namen 'ElternVal' in der Elternkomponente zu ändern, so dass die Signalstütze des Kindes mit dem Elternwert aktualisiert wird.

Dies scheint, wie es etwas sollte einfach sein, aber ich kann nicht herausfinden, wie dies mit Slots zu tun: Hier ist ein aktuelles Beispiel unter:

const MyParent = Vue.component('my-parent', { 
 
    template: `<div> 
 
    \t \t  <h3>Parent's Children:</h3> 
 
    \t \t \t \t <slot :signal="parentVal"></slot> 
 
    \t \t </div>`, 
 

 
    data: function() { 
 
    return { 
 
     parentVal: 'value of parent' 
 
    } 
 
    } 
 
}); 
 

 

 
const MyChild = Vue.component('my-child', { 
 
    template: '<h3>Showing child {{signal}}</h3>', 
 
    props: ['signal'] 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    components: { 
 
    MyParent, 
 
    MyChild 
 
    } 
 
})

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

 
<div id="app"> 
 
    <my-parent> 
 
    <my-child></my-child> 
 
    <my-child></my-child> 
 
    </my-parent> 
 
</div>

Answer 1

Sie müssen verwenden a scoped slot. Sie waren fast da, ich habe gerade die Vorlage hinzugefügt, die den Bereich erstellt.

<my-parent> 
    <template scope="{signal}"> 
     <my-child :signal="signal"></my-child> 
     <my-child :signal="signal"></my-child> 
    </template> 
    </my-parent> 

Hier ist Ihr Code aktualisiert.

const MyParent = Vue.component('my-parent', { 
 
    template: `<div> 
 
    \t \t  <h3>Parent's Children:</h3> 
 
    \t \t \t \t <slot :signal="parentVal"></slot> 
 
    \t \t </div>`, 
 

 
    data: function() { 
 
    return { 
 
     parentVal: 'value of parent' 
 
    } 
 
    } 
 
}); 
 

 

 
const MyChild = Vue.component('my-child', { 
 
    template: '<h3>Showing child {{signal}}</h3>', 
 
    props: ['signal'] 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    components: { 
 
    MyParent, 
 
    MyChild 
 
    } 
 
})

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

 
<div id="app"> 
 
    <my-parent> 
 
    <template scope="{signal}"> 
 
     <my-child :signal="signal"></my-child> 
 
     <my-child :signal="signal"></my-child> 
 
    </template> 
 
    </my-parent> 
 
</div>