Vue: Slots

How do they work?

by mattoconnell408

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<div id="app">
<!--   <c1>My slot data</c1> -->
<!--   <c1></c1> -->
<!--   <c2></c2> -->
<!--   <c2>this will go in the unnamed</c2> -->
  <c2><span slot="first">Now some custom h1 action</span>this goes in last unnamed</c2>
</div>

Babel + JSX

Vue.component('c1', {
  template: '<div><slot>Some default data</slot></div>',
});

Vue.component('c2', {
  template: '<div><h1><slot name="first">Some default data for our first</slot></h1><h2><slot name="second">Some default data for our second</slot></h2><h3><slot>some default data when nothing is passed</slot></h3></div>',
});

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