Vuejs Slot Parent Child

Question

How do I get these 2 components to work together?

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

I thought I could do something like this but it didn't appear to work

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

Here is a JS Fiddle https://jsfiddle.net/3fjmLL52/

I've added a JS Fiddle... sorry I am pretty new to vue still — Banning Stuckey
– Banning Stuckey, Commented Sep 12, 2017 at 20:38
Yes I want the slot or "template" to be in the parent as like a place holder and then the contents of the child to be dumped in there — Banning Stuckey
– Banning Stuckey, Commented Sep 12, 2017 at 20:40

Bert · Accepted Answer · 2017-09-12 20:52:51Z

If you want the child to be rendered in the parent, the template would look like this:

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

You also can remove the slot="foo" from the child template.

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

Vue.component('parent', { template: ` <div> <slot name="foo">Default</slot> <h1><slot name="bar">Header</slot> </div>` }); Vue.component('child', { template: '' + '<div>bar</div>' +	'' }); 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>

But if I have multiple slots that are being set then i'd want to keep slot="foo" right?
Ok i tried updating my JS Fiddle but I must be missing something jsfiddle.net/3fjmLL52/1
Yes multiple slots because the child will have content that will be set in different places within the template
@BanningStuckey Are there multiple lots in the child, or in the parent? I updated the answer with an example of multiple slots for the parent.
Both... please let me know if this is not the vue way but on my current path its both.

Collectives™ on Stack Overflow

Vuejs Slot Parent Child

1 Answer 1

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Related