vue插槽：
1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件。
2. 分类：默认插槽、具名插槽、作用域插槽。
3. 使用方式：
1）默认插槽：
父组件中：
<Category>
<div>html结构</div>
</Category>
子组件中：
<template>
<div>
<!— 定义插槽 —>
<solt> 插槽默认内容…</slot>
</div>
</template>
2. 具名插槽：
<div slot=‘插槽名’></div> 或 <template v-slot:插槽名></template>
父组件中：
<Category>
<template slot=‘center’>
<div> html结构1 </div>
</template>
<template v-slot:footer>
<div>html结构2</div>
</template>
</Category>
子组件中：
<template>
<div>
<!— 定义插槽 —>
<slot name=‘center’>插槽默认内容… </slot>
<slot name=‘footer’>插槽默认内容….. </slot>
</div>
</template>
3. 作用域插槽：
1. 理解： 数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（比如 数据list 在子组件中，但使用数据list 所遍历出来的结构由父组件决定。)
-
具体编码：
父组件中：
<Category>
<template scope=‘scopeData’>
<!— 生成的是ul列表 —>
<ul>
<li v-for=‘g in scopeData.games’ :key=‘g’> {{g}} </li>
</ul>
</template>
</Category>
<Category>
<template slot-scope=‘scopeData’>
<!— 生成的是h4标题 —>
<h4 v-for=‘g in scopeData.games’ :key=‘g’>{{g}} </h4>
</template>
</Category>
子组件中：
<template>
<div>
<slot :games=‘games’></slot>
</div>
</template>
<script>
export default {
name:’Category’,
props:[‘title’],
//数据在子组件自身
data(){
return {
games:[‘111’,’222’,’333’]
}
},
}
</script>
