使用插槽

<div id="root">
	<child>
		<h1>yuhao</h1>
	</child>
</div>
 
<script>
	Vue.component('child', {
		template: '<div><p>hello</p> <slot>默认内容</slot> </div>'
	})
	var vm=new Vue({
		el:"#root"
	});
</script>

使用具名插槽slot

<div id="root">
	<body-content>
		<div class="header" slot="header">header</div>
		<div class="footer" slot="footer">footer</div>
	</body-content>
</div>
 
<script>
	Vue.component('body-content', {
		//es6语法，使用具名插槽
		template: `<div>
				<slot name="header">
					<p>default header</p>
				</slot>
				<div class="content">content</div>
				<slot name="footer"></slot>
			   </div>`
	})
	var vm=new Vue({
		el:"#root"
	});
</script>

使用作用域插槽

<div id="root">
	<child>
	<!-- 父组件调用子组件时，给子组件传递了一个作用域插槽（格式如下），
             yuhao接收传过来的item -->
		<template slot-scope="yuhao">
			<li>{{yuhao.item}}-hi</li>
		</template>
	</child>
</div>
 
<script>
	Vue.component('child', {
		data: function() {
			return {
				list: [1, 2, 3, 4]
			}
		},
		template: `<div>
				<ul>
				    <slot v-for="item of list" :item=item>
					{{item}}
				    </slot>
				</ul>
			  </div>`
	})
	var vm=new Vue({
		el:"#root"
	});
</script>