作用域插槽。

首先，定義一個元件：

	<div id="root">
		<child></child>
	</div>
	<script>
		Vue.component("child",{
			template: '<div>child</div>'
		})
		var vm = new Vue({
			el: "#root"
		})
	</script>

需要在子元件中迴圈顯示一個列表：

	<div id="root">
		<child></child>
	</div>
	<script>
		Vue.component("child",{
			data: function(){
				return {
					list: [1,2,3,4,5]
				}
			},
			template: `<div>
						<ul>
						  <li v-for="item of list">{{item}}
						  </li>
						</ul>
					   </div>`
		})
		var vm = new Vue({
			el: "#root"
		})
	</script>
 

但是，當我們希望li 的樣式由外部使用元件的地方定義，因為可能有多種地方要使用該元件，但樣式希望不一樣。那麼，需要把li 改為slot 。

如下，程式碼。其中 template 必須要加的，是一個固定寫法，template 中必須有 slot-scope 屬性，該屬性的值，可以自己起。而在子元件中傳遞的資料（item）則在slot-scope 中。

	<div id="root">
		<child>
			<template slot-scope="props">
				<li>{{props.item}} - hello</li>
			</template>
		</child>
	</div>
	<script>
		Vue.component("child",{
			data: function(){
				return {
					list: [1,2,3,4,5]
				}
			},
			template: `<div>
						<ul>
						  <slot v-for="item of list" :item=item>
						  </slot>
						</ul>
					   </div>`
		})
		var vm = new Vue({
			el: "#root"
		})
	</script>
 

作用域插槽，使用場景： 子元件做迴圈顯示，或者子元件的某一部分由外部指定的時候，就使用作用域插槽。