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
WeChat-SmallProgram:组件的业务 slot 的使用的更多相关文章
- RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件Web业务平台
RDIFramework.NET ━ .NET快速信息化系统开发框架 工作流程组件Web业务平台 接前两篇: RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件介 ...
- RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件WinForm业务平台
RDIFramework.NET ━ .NET快速信息化系统开发框架 工作流程组件WinForm业务平台 接上篇: RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组 ...
- 基于 SOA 的组件化业务基础平台
业务基础平台是业务逻辑应用和基础架构平台之间的一个中间层,解决 “应用软件的业务描述和操作系统平台.软件基础架构平台之间的交互与管理问题”.操作系统平台解决了“应用软件系统与硬件之间的交互与管理问题” ...
- surging如何使用swagger 组件测试业务模块
1.前言 微服务架构概念的提出已经有非常长一段时间了,但在近期几年却开始频繁地出现,大家都着手升级成微服务架构,使用着各种技术,大家认为框架有服务治理就是微服务,实现单一协议的服务调用,微服务虽然没有 ...
- 基于SOA的组件化业务基础平台[转]
转自https://www.ibm.com/developerworks/cn/webservices/1111_xiaojg_soa/index.html 业务基础平台是业务逻辑和基础架构平台之间的 ...
- RDIFramework.NET敏捷开发框架 ━ 工作流程组件Web业务平台
接前两篇: RDIFramework.NET敏捷开发框架 ━ 工作流程组件介绍 RDIFramework.NET敏捷开发框架 ━ 工作流程组件WinForm业务平台 1.RDIFramework.NE ...
- vue组件4 利用slot将内容传递给组件
除了将数据作为prop传入到组件中,vue也允许传入HTML 父组件中的子组件:<custom-button>点我<custom-button/> custom-button子 ...
- 三、深入Vue组件——Vue插槽slot、动态组件
一.插槽slot() 1.1简单插槽slot [功能]用于从父组件中,通过子组件写成双标签,向子组件中放入自定的内容 parent.vue [1]首先把child写成双标签样式,把要插入的内容放双标签 ...
- 微信小程序创建组件的流程,以及组件 properties 和 slot
组件定义流程 1)为了方便管理组件文件,创建一个目录来存放组件(可省略该步骤) 组件与页面都有相同的配置,包括的文件有:wxml.wxss.js.json 四个文件. 2)编写组件 编写组件与编写页面 ...
随机推荐
- 2020年,MyBatis常见面试题总结
Mybatis 技术内幕系列博客,从原理和源码角度,介绍了其内部实现细节,无论是写的好与不好,我确实是用心写了,由于并不是介绍如何使用 Mybatis 的文章,所以,一些参数使用细节略掉了,我们的目标 ...
- svg和css3创建环形渐变进度条
在负责的项目中,有一个环形渐变读取进度的效果的需求,于是在网上查阅相关资料整理一下.代码如下: <!DOCTYPE html> <html lang="en"&g ...
- 【开发技巧】再见,BLE的那些坑!
蓝牙,平常你用的多吗?上班路上戴着蓝牙耳机听音乐.看视频打开蓝牙分享个人热点给小伙伴们解锁共享单车时,打开蓝牙就能迅速解锁...... BLE-蓝牙低能耗技术,方便了我们的生活,但是开发者在开发过程中 ...
- React Native Debug原理浅析
第一次在segmentfault写博客,很紧张~~~公司项目上ReactNative,之前也是没有接触过,所以也是一边学习一边做项目了,最近腾出手来更新总结了一下RN的Debug的一个小知识点,不是说 ...
- Java 八种基本类型和基本类型封装类
1.首先,八种基本数据类型分别是:int.short.float.double.long.boolean.byte.char: 它们的封装类分别是:Integer.Short.Float.Doub ...
- [LeetCode] 207. Course Schedule 课程表
题目: 分析: 这是一道典型的拓扑排序问题.那么何为拓扑排序? 拓扑排序: 有三件事情A,B,C要完成,A随时可以完成,但B和C只有A完成之后才可完成,那么拓扑排序可以为A>B>C或A&g ...
- python从一个目录中复制全部文件图片至另一个目录中,及删除指定目录中的图片
import shutil import os #目录自己改一下即可,复制 path = "./static/imgs/" new_path = "./static/up ...
- 必备技能三、render渲染函数
Vue 推荐使用在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template ...
- Nginx之负载均衡配置(一)
前文我们聊了下nginx作为反向代理服务器,代理后端动态应用服务器的配置,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/12430543.html:今天我们来聊 ...
- 洛谷P1000超级马里奥的神奇解法
话说上过洛谷的都知道,有一道经典例题P1000超级马里奥,这一题,可以说是非常简单非常经典,但是就算如此,还是可以人才辈出,我是个比较循规蹈矩的人(雾),所以我的代码就比较平常,也就是直接输出了所要求 ...