Vuejs Slot Eltern Kind

Question

Wie bekomme ich diese 2 Komponenten zusammen zu arbeiten?

Vue.component('parent', { 
    template: ''+ 
     '<slot name="foo"></slot>'+ 
    '' 
}); 

Vue.component('child', { 
    template: ''+ 
     '<div slot="foo">bar</div>'+ 
    '' 
}); 

Ich dachte, ich so etwas tun könnte, aber es schien nicht

Vue.component('parent', { 
    components: [ 
     'child' 
    ], 
    template: ''+ 
     '<slot name="foo"></slot>'+ 
    '' 
}); 

Hier zu arbeiten ist ein JS Fiddle https://jsfiddle.net/3fjmLL52/

Answer 1

Wenn Sie das Kind wollen in der zu erbringenden Übergeordnet würde die Vorlage wie folgt aussehen:

<div id="app"> 
    <main> 
     <parent> 
      <child slot="foo"></child> 
     </parent> 
    </main> 
</div> 

Sie können auch die 0 entfernenaus der untergeordneten Vorlage.

Vue.component('child', { 
    template: `<div>bar</div>` 
}); 

Vue.component('parent', { 
 
    template: ` 
 
    <div> 
 
     <slot name="foo">Default</slot> 
 
     <h1><slot name="bar">Header</slot> 
 
    \t </div>` 
 
}); 
 

 
Vue.component('child', { 
 
    template: '' + 
 
     '<div>bar</div>' + 
 
\t '' 
 
}); 
 

 
new Vue({ 
 
    el: '#app' 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> 
 
<div id="app"> 
 
    <main> 
 
     <parent> 
 
      <child slot="foo"></child> 
 
      <span slot="bar">Header Content</span> 
 
     </parent> 
 
    </main> 
 
</div>