vue slots 透传

业务场景中有时需要对第三方组件进行二次封装, 比如弹窗,表格等组件, 有时项目内会根据业务进行二次封装成业务组件, 新的业务组件会需要把自己的slots透传给原本的组件, 也可以叫传递插槽

vue 文档中的传递插槽

https://staging-cn.vuejs.org/guide/extras/render-function.html#passing-slots

// 单个默认插槽
h(MyComponent, () => 'hello')// 具名插槽
// 注意 `null` 是必需的
// 以避免 slot 对象被当成 prop 处理
h(MyComponent, null, {default: () => 'default slot',foo: () => h('div', 'foo'),bar: () => [h('span', 'one'), h('span', 'two')]
})

因为这部分文档是渲染函数的介绍, 所以没有 template 的slots透传示例, 那么用SFC写法时, 该如何透传 slots 呢

我们可以使用动态插槽名来解决, 同时把作用域插槽的传值也加上

最终代码

<template><my-comp><templatev-for="(item, key, index) in $slots":key="index"v-slot:[key]="slotScope"><slot :name="key" v-bind="slotScope"></slot></template></my-comp>
</template>

这里的my-comp 是被二次封装的组件, 上面的代码可以把当前的组件接受到的slot原封不动传递给 my-comp

vue slots 透传相关推荐

Vue props透传技巧
透传是一个通讯层面的概念,指的是在通讯中不管传输的业务内容如何,只负责将传输的内容由源地址传输到目的地址,而不对业务数据内容做任何改变. 其实透传这个概念,我最早是从上面一个领导那里听到的,由于他是电 ...
uniapp 消息推送与透传+语音播报
本章介绍 uniapp app端消息推送与语音播报..此功能需要前后端相互配合下面代码单独运行是不会推送消息的. 前面需要配置相关包名等信息以及勾选推送,配置在此处按要求填写就行我这里只讲代码逻辑 ...
vue3.0 透传 Attribute
目录效果一(子组件只有一个根节点,透传生效) 效果二(子组件有多个根节点,透传未生效,且控制台会抛出警告) 效果三(子节点如果不是单根节点的时候,可以通过添加:="$attrs" ...
1、利用蓝牙定位及姿态识别实现一个智能篮球场套件（一）——用重写CC2541透传模块做成智能手环...
一.预言要实现一个智能篮球场套件,需要设计一个佩戴在篮球运动员手臂上的可以检测投篮.记步的手环,以及一套可以根据RSSI定位运动员的蓝牙定位装置.下面是大致需要的步骤: 首先,需要用CC2541透传 ...
基于Protobuf共享字段的分包和透传零拷贝技术，你了解吗？
导语 | 本文通过介绍实现Protobuf共享字段Guard,并将其应用于中控/召回场景,并获得了显著CPU/时延收益.即使不使用Guard,希望本文的经验和思路也能为读者带来一些帮助和参考. 引言 ...
华为消息推送有透传通道吗_华为首款头戴耳机FreeBuds Studio正式发布，能否撑起品牌之名？...
10月22日,华为 Mate40 系列全球发布会成功举办,发布会上除了 Mate40 系列与大家正式见面以外,此前所爆料的华为首款头戴耳机 FreeBuds Studio 也一同登场.这款产品整体外观 ...
HAProxy客户端IP地址的透传
HAProxy客户端IP地址的透传环境准备 server IP client 172.20.27.10 haproxy 172.20.27.20,192.168.27.10 nginx 192.16 ...
vue代码上传服务器后背景图片404解决方法
vue代码上传服务器后背景图片404解决方法参考文章: (1)vue代码上传服务器后背景图片404解决方法 (2)https://www.cnblogs.com/Mrrabbit/p/7830944 ...
php实现tcp连接esp8266,ESP8266之TCP透传
模块:esp-01s SDK版本:ESP8266_RTOS_SDK-3.0 开发环境:wsl+vscode 功能模块:wifi,tcp_client,uart 什么是透传?透传,即透明传输(pass- ...

vue slots 透传

vue 文档中的传递插槽

vue slots 透传相关推荐

最新文章

热门文章