vue的几种插槽及具体用法

最新推荐文章于 2024-05-28 17:25:55 发布

flyyy菜鸟

最新推荐文章于 2024-05-28 17:25:55 发布

阅读量777

点赞数

分类专栏： Vue.js 文章标签： javascript vue.js html html5 前端

本文链接：https://blog.csdn.net/weixin_44771007/article/details/104167649

版权

Vue.js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了Vue组件中的插槽使用，包括基本插槽的替换原理，具名插槽通过`slot`的`name`属性实现，以及作用域插槽如何将数据传递给外部。欢迎读者提出宝贵意见。

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

插槽

基本用法：组件son里所有的slot都会被替换

<!--son-->
<div>
	<slot></slot>
</div>
<!--father-->
<son>
	替换slot
</son>

具名插槽（通过slot的name属性）

<!--son-->
<div>
	<slot name = "one"></slot>
	<slot name = "two"></slot>
	<slot name = "three"></slot>
</div>
<!--father-->
<son>
	<template v-slot:one>替换name为one的slot</template>
	<template v-slot:two>替换name为two的slot</template>
	<template v-slot:three>替换name为three的slot</template>
</son>

默认插槽（匹配上没有名字的slot）

<!--son-->
<div>
	<slot name = "one"></slot>
	<slot></slot>
	<slot name = "three"></slot>
</div>
<!--father-->
<son>
	<template v-slot:one></template>
	<template></template>  //会匹配上没有名字的slot
	<template v-slot:three></template>
</son>

作用域插槽（在组件内部通过slot关键字将数据源交到外部的插槽中）

<!--son-->
<div>
	<slot :abc="msg"></slot>
</div>
<!--father-->
<son>
	<template v-slot="obj">
		{{obj}}   <!--obj:{"abc":"aabbcc"}-->
	</template>
</son>