Vue插槽

最新推荐文章于 2024-10-11 14:17:40 发布

莫璃Moly

最新推荐文章于 2024-10-11 14:17:40 发布

阅读量152

点赞数

分类专栏： Vue学习笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_42430908/article/details/125735594

版权

Vue学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的组件通信方式——模板插槽，包括默认插槽、具名插槽和作用域插槽的使用方法。通过实例代码展示如何在父组件中插入HTML结构到子组件指定位置，以及如何传递数据并控制其结构。对于理解和应用Vue.js组件间的通信具有指导意义。

摘要由CSDN通过智能技术生成

1. 作用

让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件—>子组件。
在这里插入图片描述

2. 分类

默认插槽、具名插槽、作用域插槽

3. 使用方式

3.1 默认插槽

父组件中

<Category>
	<div>html结构</div>
</Category>

子组件中

<template>
	<div>
		<slot>插槽默认内容</slot>
	</div>
</template>

3.2 具名插槽

父组件中

<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>

3.3 作用域插槽

理解

数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

具体编码

父组件中

<Category>
	<template scope="scopeData">
		<ul>
			<li v-for="g in scopeData.games" :key="g">{{g}}</li>
		</ul>
	</template>
	<template scope="scopeData">
		<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
	</template>
</Category>

子组件中

<template>
	<div>
		<slot :games="games"></slot>
	</div>
</template>

<script>
	export default{
		name:'Category',
		props:['title'],
		data(){
			return {
				games:['红色警戒','穿越火线','超级玛丽','怪物猎人']
			}
		},
	}
</script>