插槽

1. 默认插槽

父组件中：（即在子组件中插入标签结构）

<ItemClassify title="游戏分类">    
	<ul>        
		<li v-for="(g,index) in games" :key="index">{{g}}</li>
	</ul>
</ItemClassify>

子组件中：

<!-- 定义一个插槽 -->
<slot>当使用者在组件中没有插入结构，我会出现</slot>

2. 具名插槽（有多个插槽时，可以根据插槽名将内容放到指定的位置）

父组件中：

<ItemClassify title="美食分类">    
	<img slot="center" src="http://www.baidu.com">    
	<a slot="footer" href="http://www.baidu.com">更多美食</a>
</ItemClassify>

子组件中：

<slot name="center">当使用者没有传递任何结构，我会出现1</slot>  
<slot name="footer">当使用者没有传递任何结构，我会出现2</slot>                                                         

3. 作用域插槽（可实现子组件给父组件传递数据）

1. 只使用作用域插槽

父组件中：

<ItemClassify title="美食分类">
// data只在template中起作用（注意：v-slot只能添加在template上）
// 用scoped对象接收传过来的数据,scoped={food:["火锅","烧烤","小龙虾","牛排"]}
<template v-slot:default="scoped"">
	<ul>
		<li v-for="(f,index) in scoped.food" :key="index">{{f}}</li>
	</ul>
</template></ItemClassify>

子组件中：

<h3>{{title}}</h3>
<slot :food="food">
	当使用者没有传递任何结构，我会出现
</slot>

data() {  
	return {
		food:["火锅","烧烤","小龙虾","牛排"],  
	}
},                                                                                          

2. 作用域插槽和具名插槽一起使用

父组件中：

<ItemClassify title="美食分类">    
// content表示插槽名，通过解构得到food   
<template #content="{food}">        
	<ul>            
		<li v-for="(f,index) in food" :key="index">{{f}}</li>        
	</ul>    
</template></ItemClassify>

子组件中：

<h3>{{title}}</h3>
<slot :food="food" name="content">
	当使用者没有传递任何结构，我会出现
</slot>

data() {  
	return {
		food:["火锅","烧烤","小龙虾","牛排"],  
	}
},