微客导航 » 文章资讯 » 详解Vue中使用插槽（slot）、聚类插槽

详解Vue中使用插槽（slot）、聚类插槽

2023-08-24 17:00:04 173

一、基本的插槽

这里总结两点

如果不在子组件中使用插槽（slot），那么在子组件中写任何代码都是无效的的，不会显示
（插槽默认值）如果子组件中没有插入任何代码的话就会显示组件插槽中的内容

slot代表父组件往子组件中插入的标签
这里就代表组件子组件中的

Dell

这里如果是这样的

就会显示默认内容中的默认内容

二、聚类插槽

1、如果不在子组件中使用插槽（slot），那么在子组件中写任何代码都是无效的的，不会显示

2、（插槽默认值）如果子组件中没有插入任何代码的话就会显示组件插槽中的内容

这里如果是这样的

就会显示默认内容中的默认内容

3、聚类插槽

子组件这么写：

template:`
默认内容
content
默认内容

然后这么引用：

	
header				
footer

就会发现结果是

header
footer
content
header
footer

这个不是我的本意，那么怎么办，这里就引入了聚类插槽
子组件：

template:`
默认内容
content
默认内容
`

子组件引用：


header

footer

不难发现给每个想要指定的子组件插槽添加name属性，然后在引用中slot中明确是哪个即可也可以理解为引用中是用了两个插槽同时，默认内容同时适用在每个插槽

三、作用域插槽

这个是普通插槽的Demo




	
	Vue中使用插槽（slot）
	


	
		
		
			Dell

Vue.component('child',{ /* slot代表父组件往子组件中插入的标签这里就代表组件子组件中的

Dell

*/ template:`

默认内容

` }); varvm=newVue({ el:'#root', });

这个是聚类插槽的Demo




	
	Vue中使用插槽（slot）
	


	
		
		
			defaultheader

defaultfooter

Vue.component('child',{ /* slot代表父组件往子组件中插入的标签这里就代表组件子组件中的

Dell

*/ template:`

默认内容

content

默认内容

` }); varvm=newVue({ el:'#root', });

以上所述是小编给大家介绍的Vue中使用插槽（slot）、聚类插槽详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

详解Vue中使用插槽（slot）、聚类插槽

热门推荐

随机推荐