Vue 自定义组件 —— slot插槽

父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用 slot 技术，注意：插槽内容是在父组件中编译后, 再传递给子组件的。

一、默认插槽

<div class="category">
	<h3>{{title}}分类</h3>
	<slot>插槽，当使用者没有传递具体介都时出现</slot>		<!--声明插槽-->
</div>

<div class="container">
	<CateGory title='美食'>
		<img src="./img/asd.jpg" alt="" style="width: 100%;"/>	<!--使用插槽-->
	</CateGory>
</div>

二、具名插槽 声明插槽时指定name属性 用于区别每个插槽 便可以声明多个插槽

<div class="category">
	<h3>{{title}}分类</h3>
	<slot name='center'>center插槽，当使用者没有传递具体介都时出现</slot>
	<slot name='footer'>footer插槽，当使用者没有传递具体介都时出现</slot>
</div>

使用时也要指定使用的是哪一个插槽，使用插槽时用slot属性或v-slot属性 指定定义时的name值，但是v-slot只能使用在<template>节点中
一个插槽可以使用多次 但是并不推荐 可以使用<template>节点包裹起来

<div class="container">
	<CateGory title='美食'>
		<img slot="center" src="./img/asd.jpg" alt="" style="width: 100%;"/>
		<a slot="footer" href="http://www.baidu.con">美食广场</a>
	</CateGory>
	<CateGory title='游戏'>
		<img slot="center" src="./img/asd.jpg" alt="" style="width: 100%;"/>
		<img slot="center" src="./img/asd.jpg" alt="" style="width: 100%;"/>
	</CateGory>
	<CateGory title='电影'>
		<template v-slot:center>
			<img src="./img/asd.jpg" alt="" style="width: 100%;"/>
			<img src="./img/asd.jpg" alt="" style="width: 100%;"/>
		</template>
	</CateGory>
</div>

三、作用域插槽，可以实现 插槽定义者 向 组件使用者传递数据。

数据存放在定义插槽的组件，却被父组件使用
通过 :数据名='数据名’传递给父组件
父组件通过 <template>节点中的scope属性接受数据对象
可同时向父组件传递多组数据 因为父组件接收的是对象

<div class="category">
	<h3>{{title}}分类</h3>
	<slot :foods='foods'>center插槽，当使用者没有传递具体介都时出现</slot>
</div>

<CateGory title='美食'>
	<template scope="dataObject">
		<ul>
			<li v-for="(food,index) in dataObject.foods" :key="index">{{food}}</li>
		</ul>
	</template>
</CateGory>

作用域插槽声明时也可设置name属性 用法与具名插槽相同