Vue2 插槽 - Vue | Nico Niconi = Nekoaimer = 清心如水，清水即心

# 插槽

作用：让父组件可以向子组件指定位置插入 html 结构，也是一种组件间通信的方式，适用于 <strong style="color:red"> 父组件 ===> 子组件 </strong> 。
分类：默认插槽、具名插槽、作用域插槽

vue

vue

理解：<span style="color:red"> 数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。</span>（games 数据在 Category 组件中，但使用数据所遍历出来的结构由 App 组件决定）

vue

	父组件中：
	<Category>
	<template scope="scopeData">
	<!-- 生成的是ul列表 -->
	<ul>
	<li v-for="g in scopeData.games" :key="g"><!--swig0--></li>
	</ul>
	</template>
	</Category>

	<Category>
	<template slot-scope="scopeData">
	<!-- 生成的是h4标题 -->
	<h4 v-for="g in scopeData.games" :key="g"><!--swig1--></h4>
	</template>
	</Category>
	子组件中：
	<template>
	<div>
	<slot :games="games"></slot>
	</div>
	</template>

	<script>
	export default {
	name:'Category',
	props:['title'],
	// 数据在子组件自身
	data() {
	return {
	games:['红色警戒','穿越火线','劲舞团','超级玛丽']
	}
	},
	}
	</script>

Vue