Named slot to child component

by Mark Meyer

HTML

<div id="app1">
  <parent>
    <template #forchild>
      <div>
        For child template area
        <template #title>Title!</template>
      </div>
    </template>
  </parent>
</div>

SCSS

.parent {
  background-color: red;
}

.child {
  background-color: blue;
}

JavaScript

const Child = {
  template: `
  	<div class="child">
      Child area
      <slot name="fromparent">
        <slot name="title"></slot>
      </slot>
    </div>
  `,
};

const Parent = {
  template: `
  	<div class="parent">
      Parent Area
      <child>
        <template #fromparent>
          <slot name="forchild"></slot>
        </template>
      </child>
    </div>
  `,
  components: {
    Child,
  },
};

new Vue({
  el: '#app1',
  components: {
    Parent,
  }
});