VueJS2 - content distribution

Content distribution from parent to child component using slots

by roguexiaohuihui

HTML

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

<div id="app">
  <h3></h3>
  <typographer>
    <span slot="serif">This is serif text</span>
    <span slot="sans-serif">This is sans-serif text</span>
  </typographer>
  <h3>Using Typographer through SuperTypographer</h3>
  <super-typographer>
    <span slot="monospace">This is monospace text</span>
    <span slot="cursive">This is cursive text</span>
    <span slot="serif">This is serif text</span>
    <span slot="sans-serif">This is sans-serif text</span>
  </super-typographer>
</div>

CSS

.serif {
  font-family: serif;
}

.sans-serif {
  font-family: sans-serif;
}

.cursive {
  font-family: cursive;
}

.monospace {
  font-family: monospace;
}

JavaScript

Vue.component('superTypographer', {
  template: `
  <div>
  	<div class="cursive">
    	<slot name="cursive"></slot>
    </div>
    <div class="monospace">	
      <slot name="monospace"></slot>
    </div>
    <typographer><!-- this does not work -->
    	<template slot="serif"><slot name="serif"></slot></template>
      <template slot="sans-serif"><slot name="sans-serif"></slot></template>
    </typographer>
	</div>
  `
})

Vue.component('typographer', {
  template: `
  <div>
  	<div class="serif">
    	<slot name="serif"></slot>
    </div>
    <div class="sans-serif">	
      <slot name="sans-serif"></slot>
    </div>
	</div>
  `
})

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