侧边栏壁纸
博主头像
丛庆

没事儿写代码,有事写代码。email:1024@cong.zone

  • 累计撰写 116 篇文章
  • 累计创建 97 个标签
  • 累计收到 4 条评论

【Vue】插槽

丛庆
2023-10-18 / 0 评论 / 0 点赞 / 227 阅读 / 311 字 / 正在检测是否收录...
温馨提示:
部分资料和图片来源于网络,如有危害到您的利益请与我联系删除,1024@cong.zone。

默认插槽

作用:让组件内部的一些结构支持自定义

使用方式

组件内需要定制的结构部分,改用<slot></slot>占位
使用组件时,<MyDialog></MyDialog>标签内部,传入结构替换slot
image-1697638937915

image-1697639999002

具名插槽

一个组件内有多出结构,需要外部传入标签,进行定制

使用方式

1.多个slot 使用name属性指定插槽名字
2.在组件内使用template 和 v-slot:插槽名,编写对应的name的slot
image-1697642734594

v-slot:插槽名可以简写为 #插槽名

作用域插槽

定义slot插槽的时是可以传值的。可以给插槽绑定数据,在组件中使用。

1.给slot标签,以添加属性的方式传值

<slot :id="item.id" msg="测试文本"></slot>

2.所有添加的属性,都会被收集到一个对象中

{id:3,msg:'测试内容'}

3.在template中,通过插槽名="obj"接收,默认插槽名为default

<MyTable :list="list">
<template #default="obj">
	<button @click="del(obj.id)">删除</button>
</template>
</MyTable

image-1697645338276

0

评论区