当子组件做循环,或者某一部分dom结构应该由外部传递进来的时候用作用域插槽。 作用域插槽必须是template开头且结尾 slot-scope以及对应的自定义名字(这里是myprops)来接收传递过来的数据:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="./vue.js"></script>
	<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
	<child>
		<!-- 作用域插槽必须是template开头且结尾 -->
		<template slot-scope="myprops">
			<li>{{myprops.item}}</li>
		</template>
	</child>
</div>
<script type="text/javascript">
	Vue.component("child", {
		data: function() {
			return {
				list: [1, 2, 3, 4, 5, 6]
			}
		},
		template: `<div>
						<ul>
							<li v-for="item of list">{{item}}</li>
						</ul>
						<ul>
							//这种方式的作用是:显示什么,怎么显示不再是子组件决定了,而是父组件调子组件的时候给子组件传递模版:
							<slot v-for="item of list" :item=item></slot>
						</ul>
					</div>`
	});

	var vm = new Vue({
		el: "#root"
	})
</script>
</body>
</html>