当前位置：首页 > article >正文

Vue学习笔记-插槽

article 2024/9/24 3:27:26

插槽

作用：让父组件可以向子组件的指定位置插入html结构，也是一种组件间的通信方式，适用于父组件===>子组件
分类：默认插槽、具名插槽、作用域插槽

使用方式：

默认插槽

父组件:
<Category>
	<div>插入的html结构</div>
</Category>

子组件:
<template>
	<div>
		<!--定义插槽的位置-->
		<slot>此处可写一些默认的html内容，但以后会被父组件中插入的html结构替换</slot>
	</div>
</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>

作用域插槽

理解：数据在子组件中，但数据的生成结构需要组件的使用者来决定（父组件）
具体编码

父组件:
<Category>
	<template scope="scopeData">
		<!--生成的是ul列表-->
		<ul>
			<li v-for="(g,index) in scopeData.games" :key="index">{{g}}</li>
		</ul>
	</template>
</Category>
<Category>
	<template>
		<!--生成的是h4标签-->
		<h4 v-for="(g,index) in scopeData.games" :key="index">{{g}}</h4>
	</template>
</Category>

子组件:
<template>
	<div>
		<slot :games="games"></slot>
	</div>
</template>

<script>
	export default{
		name:'Category',
		data(){
			return{
				games:['DNF','LOL','CF','CS_Online']
			}
		}
	}
</script>