WeChat-SmallProgram:组件的业务 slot 的使用

1、调用组件向自定义组件插入内容,使用  slot 在自定义模板中有一对

<view><slot></slot></view>

这里是干什么用的呢? 在组件模板中可以提供一个 <slot> 节点,用于承载组件引用时提供的子节点。

在 components 创建组件 , 点击 components 自动创建好所需文件

在 .wxml 文件中输入

<view>
     <slot></slot>
</view>

2 、json 文件 开启 :  component: true  开启组件使用

3 、如果启用多slot支持 ,在js中引入

options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
},

4. 组件完毕, 视图引入组件 , pages 文件中的属于视图    比如:pages文件中的  detail 文件引用组件,为父组件

4.1、先在父组件 . json 中 引入 子组件的路径

4.2、在 wxml 使用  , 我定义的 子组件 名为  c-ping

  如图使用: <c-ping><text> 这里写内容 </text></c-ping>

4.3、视图就会显示出来内容,如果没有 slot  ,视图就不显示内容

 

You have to work hard to look effortless

You're going to sneak up and surprise everyone

 

 

原文引用https://blog.csdn.net/qq_42767631/article/details/84971139

 

posted @   coding++  阅读(236)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示