Vue slot

vue-slot.html

<div id="parent-template">
  <h1>我才是boss</h1>
	<child>
    <p>>原始头</p>
		<p slot="head">我是头</p>
		<p slot="foot">我是尾</p>
		<p slot="xx">我没用</p>
		<p>>原始尾</p>
	</child>
</div>

<template id="main-template">
	 <div>
		<slot name="head">头部占位</slot>
    <div>
      <p>原始内容(无slot)：</p>
		  <slot>原始内容占位</slot>
     </div>
		<slot name="foot">尾部占位</slot>
	</div>
</template>

vue-slot.js

new Vue({
    el: "#parent-template",
    components:{
        'child':{template: `#main-template`}
    },
  data:{
    list:['a','b'],
  },
});

vue-slot.markdown

Vue slot

A Pen by Captain Anonymous on CodePen.

License.

vue.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>