vue-插槽

一、插槽

1、默认插槽

<!--定义了一个子组件<son></son>-->
<template>
	<div>
		<!--定义插槽-->
		<slot></slot>
	</div>
</template>

<!--父组件用这个子组件-->
<template>
	<son>
		<!--这一部分会把子组件的slot替换掉-->
		<div>我把子组件的slot替换掉啦</div>
	</son>
</template>

2、具名插槽

<!--定义了一个子组件<son></son>-->
<template>
	<div>
		<!--定义插槽，起名字-->
		<slot name="one"></slot>
		<slot name="two"></slot>
	</div>
</template>

<!--父组件用这个子组件-->
<template>
	<son>
		<div slot="one">我把子组件的第一个slot替换掉啦</div>
		<div slot="two">我把子组件的第二个slot替换掉啦</div>
	</son>
</template>
<!--还有一个新版的写法，v-slot:插槽名，但这只能在template标签里面使用-->
<template>
	<son>
		<template v-slot:one>
			<p>我把子组件的第一个slot替换掉啦</p>
		</template>
		<template v-slot:two>
			<p>我把子组件的第一个slot替换掉啦</p>
		</template>
	</son>
</template>

3、作用域插槽
数据在组件自身，但根据数据生成的结构需要组件的使用者来确定

<!--定义了一个子组件<son></son>-->
<template>
	<div>
		<!--定义插槽-->
		<slot :games="games"></slot>
	</div>
</template>

<script>
	export default {
	    data() {
	    	name:"son",
	        return {
	        	//数据在子组件里面
	        	games:['game1','game2','game3']
	        }
	    }
    }
</script>

<!--父组件用这个子组件-->
<template>
	<son>
		<!--scope可以随便命名，它返回一个对象，里面包含了子组件的数据内容-->
		<template scope="data">
		<!--或者写<template slot-scope="data">-->
			<div v-for="(g,index) in data.games" :key="index">{{g}}</div>
		</template>
	</son>
</template>