CODEWITHSUNDEEP
vue.js
Slavic
Slavic

Reputation: 1962

How to insert named slots into parent components

Named slots are very useful in overriding sections of a component, like so:

<warning> <template slot="text">Custom warning text!</template> </warning>

How does one use named slots to override sections of warning component within a parent component, one level up? 

<component-with-a-warning>
    <template slot="text">Custom warning text!</template>
</component-with-a-warning>

I illustrated this problem better in a JS Fiddle. https://jsfiddle.net/madhazelnut/pdzoeqj0/

Upvotes: 1

Views: 685

Answers (1)

Decade Moon
Decade Moon

Reputation: 34286

If I understand your question correctly, you want to wrap a component inside another component and be able to optionally specify the slots of the inner component from slots defined on the outer component.

A <slot> can also be rendered inside the slot of another component by adding the slot="name" attribute to it, just like you would any other component that you want to render within a slot.

Vue.component('warning', {
  template: '#warning',
});

Vue.component('wrapped-warning', {
  template: '#wrapped-warning',
});

new Vue({
  el: '#app',
});
.warning {
  background-color: gold;
  margin: 10px 0;
}
<script src="https://unpkg.com/vue"></script>

<template id="warning">
  <div class="warning">
    <h1><slot name="heading"></slot></h1>
    <div><slot name="text"></slot></div>
  </div>
</template>

<template id="wrapped-warning">
  <warning>
    <slot name="heading" slot="heading">Default wrapped heading</slot>
    <slot name="text" slot="text">Default wrapped text</slot>
  </warning>
</template>

<div id="app">
  <wrapped-warning></wrapped-warning>
  <wrapped-warning>
    <template slot="heading">Overridden heading</template>
    <template slot="text">Overridden text</template>
  </wrapped-warning>
</div>

Upvotes: 1

Related Questions