Vue 中的作用域插槽

作用域插槽。

首先，定义一个组件：

	<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>

作用域插槽，使用场景： 子组件做循环显示，或者子组件的某一部分由外部指定的时候，就使用作用域插槽。