微信小程序自定义组件介绍

自定义组件发开文档
类似vue或者react中的自定义组件, 小程序允许我们使用自定义组件的方式来构建页面.

自定义组件的使用

1. 创建组件（js,json,wxml,wxss)

2. 在父组件 json文件中 注册组件

"usingComponents": {"cell":"/components/cell/cell",
}
}

3. 使用组件

<cell ></cell>

组件的样式

1. 隔离样式（默认页面与组件的样式是相互隔离的）

//在子组件cell.js 允许样式隔离
options:{// 样式隔离：apply-shared 父影响子，shared父子相互影响，
//isolated相互隔离styleIsolation:"isolated",
},

2. 外部类

  • 01 在子组件cell.js定义外部类
 externalClasses:["cell-class"],
  • 02 在子组件cell.wxml 使用外部类
<view class="cell cell-class" > 我是组件里的cell</view>
  • 03 在父组件页面com.wxml 使用外部类
<cell cell-class="mycell"></cell>
  • 04 在父组件页面com.wxss 设置外部类的样式
.mycell{line-height: 120rpx !important;
color: #f70;
}

完整图片代码

自定义组件插槽

1.默认插槽（text）

  • 01 在父组件–页面com.wxml 中定义默认插槽
<cell>
<text>鸡蛋50倍</text>
</cell>
  • 02 在子组件–cell.wxml中接收插槽内容（slot）
<view class="cell cell-class" >
我是组件里的cell-
<slot></slot>
</view>

图片完整代码

2.命名插槽

  • 01 在父组件–页面com.wxml 中定义命名插槽
<cell>
<text slot="prv">												


											

微信小程序之自定义组件的使用、介绍、案例分享相关推荐
	

    
						
  1. 微信小程序 配置自定义组件代码按需注入 lazyCodeLoading
		
    微信小程序 配置自定义组件代码按需注入 lazyCodeLoading 官方网址 在app.json最后一行加上,就可以了. "lazyCodeLoading": "re ...
    
		
    2. 
						
  2. 微信小程序的自定义组件（2）
		
    文章目录 6. 组件的生命周期 7. 组件所在页面的生命周期 8. 组件插槽 9. 组件父子组件间的通信 10. 组件-behaviors 6. 组件的生命周期 created attached re ...
    
		
    3. 
						
  3. 微信小程序（自定义组件）
		
    文章目录 自定义组件 创建自定义组件 引用组件 组件和页面的区别 自定义组件的样式 样式隔离 修改样式隔离选项 组件的data和methods 组件的properties 数据监听 使用纯数据字段提升 ...
    
		
    4. 
								
  4. 微信小程序之自定义组件(微信小程序完结)
		
    微信小程序 自定义组件 类似vue或者react中的自定义组件, 小程序允许我们使用自定义组件的方式来构建页面. 1.1 创建自定义组件 类似于页面,一个自定义组件由 json, wxml, wxss ...
    
		
    5. 
						
  5. 微信小程序中自定义组件
		
    文章目录 小程序项目 app.json pages/index/index.wxml pages/index/index.wxss pages/index/index.js 自定义组件 compone ...
    
		
    6. 
						
  6. 微信小程序_自定义组件_初体验
		
    自定义组件是微信小程序中重要的组成部分,是实现模块化开发的重要手段 个人认为,自定义组件是区分菜鸟与高手的分水岭 第一篇先介绍小程序自定义组件的基本使用 自定义组件的使用可以分为如下几个步骤 创建组件 ...
    
		
    7. 
						
  7. 【微信小程序】自定义组件的实现及数据交互
		
    简单的自定义组件 本文的使用场景是:多个页面都需要用到拨打电话功能,为减少代码量.便于维护,所以自定义了一个组件,每个页面直接调用即可.基本实现下图样式: 下面我们来一步步的实现它: step1:创建 ...
    
		
    8. 
						
  8. 微信小程序 - 在自定义组件中请求后端 API 数据接口（引入该组件的页面触发）组件在哪个生命周期钩子函数中请求接口数据呢？
		
    前言 我开发了一个 A 页面,然后在 A 页面引入了一个组件 B ,我想在 B 组件中加载进来的时候执行一个后端请求,获取数据进行 B 组件渲染. 今天遇到这么一个问题,我写好的小程序 组件(comp ...
    
		
    9. 
						
  9. 微信小程序 12 自定义组件
		
    12.1 自定义组件的学习 排行榜的结构 我们可以 使用 recommendContainer.header 部分的 写法. 那么也就是说,它俩可以是 长的一毛一样的.那么 我们是否 可以 进行一个  ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. android 服务的应用，在Activity中实现背景音乐播放
		
    2. 
						
  2. 幅度和幅值有区别吗_克拉克 (Clark) 变换中等幅值 (2/3) 和等功率 (sqrt(2/3)) 变换的公式推导...
		
    3. 
						
  3. mybatis 连接池_应用框架之Mybatis数据源和连接池
		
    4. 
						
  4. 【LeetCode笔记】312. 戳气球（Java、动态规划）
		
    5. 
						
  5. mysql timestamp排序_对多个表进行排序MYSQL TimeStamp
		
    6. 
						
  6. 无法从计算机中删除,【求助】Windows无法从该家庭组中删除你的计算机
		
    7. 
						
  7. 学习算法的网址【原创】
		
    8. 
						
  8. 杭州有那些APP外包公司？
		
    9. 
						
  9. C语言输出AB9798,c语言基础练习习题及答案.doc
		
    10. 
						
  10. 开发者需要的 9 款代码比较工具
		
    11. 
						
  11. chromecast 协议_如何驯服Chromecast的后台数据使用情况
		
    12. 
						
  12. HBase常用过滤器
		
    13. 
						
  13. 中关村科金李超：多元融合成为音视频技术发展新风向
		
    14. 
						
  14. DirectShow 简介
		
    15. 
						
  15. r语言进行go富集分析_好用的在线GO富集分析工具
		
    16. 
						
  16. html分辨率与放大倍数,放大镜倍数 你怎样知道放大镜的放大倍数
		
    17. 
						
  17. [linux] bash_profile 编辑(i)/退出编辑(esc)/退出(：wq)
		
    18. 
						
  18. 01 | 机械专业英语词汇
		
    19. 
						
  19. 24v中间继电器怎么控制220v交流接触器
		
    20. 
						
  20. linux查看端口及端口详解
		
    21. 
		

	


热门文章
	

    
									
  1. q群机器人php,QQ机器人接口（加群可见）
			
    2. 
						
  2. 关于Spring Cloud：Mapper＜＞中的泛型红线：Type ‘org.apache.ibatis.annotations.Mapper‘ does not have type paramet
			
    3. 
						
  3. 2021-07-28
			
    4. 
						
  4. label  标签属性的总结归纳
			
    5. 
						
  5. floorplan 和 place的区别
			
    6. 
						
  6. 手机（wap）网页底部固定悬浮广告带轮播特效代码
			
    7. 
						
  7. Netty 实现一对一客户端聊天（由服务器转发）
			
    8. 
						
  8. pay支付老是显示服务器出错,Apple Pay服务器崩溃！真爱粉：没事，后半夜估计可以了...
			
    9. 
						
  9. 通过蚂蚁开放联盟链快速上链
			
    10. 
						
  10. ILSpy反编译C#web程序
			
    11.