学习Vue的插槽总结

今天学习了Vue的插槽,在这之前学习使用组件的使用还没有试过在父组件中给子组件插入html结构,今天学习的插槽正是拿来实现这一功能的,这也是一种组件中通信的方式,首先插槽分为三类:默认插槽、具名插槽、作用域插槽。接下来分别看一下它们的使用方法。

默认插槽:

javascript 复制代码
//父组件中:
<Category>
	<div>html结构1</div>
</Category>
//子组件中:
<template>
		<div>
			<!--定义插槽-->
			<slot>插槽默认内容...</slot>
		</div>
</template>

父组件div标签中的html都将会被放到子组件的slot标签中(slot标签是不会出现在真实DOM上的),slot标签内还可以设置默认值,当没有接收到父组件传来的html结构时,默认值就会插入。

具名插槽:

javascript 复制代码
//父组件中:
<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>

默认插槽只能使用一个,而具名插槽可以使用多个,多个则需要通过给插槽命名来准确插入。先在子组件中定义插槽时并通过name属性给该插槽起名,在父组件使用的template标签(该标签不会被渲染到真实DOM上)通过slot=""或v-slot:(新语法)语法来确定插入相当于的插槽内。

作用域插槽:

javascript 复制代码
//父组件中
<Category>
	<template scope="scopeData"> //scope的值可以自定义
		<!--生成的是ul列表-->
		<ul>
			<li v-for="g in scopeData.games" :key="g">{{g}}</li>
		</ul>
	</template>
</Category>

<Category>
	<template slot-scope="scopeData"> //新语法
		<!--生成的是h4标题-->
		<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",
		prope:['title'],
		//数据在子组件自身
		data() {
			return {
				games:['红警','穿越火线','劲舞团','超级玛丽']
			}
		}
	}
</script>

作用域插槽适用于需要的数据在子组件上的时候,可以理解为数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。使用方法首先在子组件插槽slot标签中绑定一个向外可以访问的自定义名字(比如代码中的games),父组件只需在template标签中配置scope或slot-scope(新语法),值是自定义的,但要访问到子组件里面的数据就需要在值的后面通过(.子组件自定义的名字)来获得。

相关推荐
行云流水剑15 分钟前
【学习记录】使用 Kali Linux 与 Hashcat 进行 WiFi 安全分析:合法的安全测试指南
linux·学习·安全
渔舟唱晚@2 小时前
大模型数据流处理实战:Vue+NDJSON的Markdown安全渲染架构
vue.js·大模型·数据流
门前云梦3 小时前
《C语言·源初法典》---C语言基础(上)
c语言·开发语言·学习
漂流瓶jz3 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
0x7CF4 小时前
QT3D学习笔记——圆台、圆锥
qt·学习·3d
鱼樱前端4 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
q_19132846954 小时前
基于Springboot+Vue的办公管理系统
java·vue.js·spring boot·后端·intellij idea
coding随想4 小时前
JavaScript中的原始值包装类型:让基本类型也能“变身”对象
开发语言·javascript·ecmascript
qq_386322694 小时前
华为网路设备学习-24(路由器OSPF - 特性专题)
学习·华为·智能路由器
满分观测网友z4 小时前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js