vue中的3种插槽方式

默认插槽

//父
<Category>
	<div>你好啊</div>
</Category>

//子（Category组件）
<template>
	<div>
		//定义插槽
		<slot>我是插槽的默认内容...</slot>
	</div>
</template>

具名插槽

//父
<Category>
	//必须用template
	<template slot="slot1">
		<div>你好啊slot1</div>
	</template>
	<template slot="slot2">
		<div>你好啊slot2</div>
	</template>
</Category>

//子（Category组件）
<template>
	<div>
		//定义插槽
		<slot name="slot1">我是插槽的默认内容...</slot>
		<slot name="slot2">我是插槽的默认内容...</slot>
	</div>
</template>

作用域插槽（例如：elementUI中 table组件中的自定义列）

//父
<Category>
	//必须用template
	//使用scope接收子组件中，插槽向使用者传递的数据
	<template scope="scopeData">
		{{scopeData.myData}}
	</template>
</Category>

//子（Category组件）
<template>
	<div>
		//定义插槽(数据在子组件中，并且把数据向组件使用者传递)
		<slot :myData="data">我是插槽的默认内容...</slot>
	</div>
</template>