【小程序】微信小程序自定义组件Component详细总结(小程序微信认证)

【小程序】微信小程序自定义组件Component详细总结 1- 前言

推荐整理分享【小程序】微信小程序自定义组件Component详细总结(小程序微信认证)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:小程序微信支付手续费,小程序微信认证,小程序微信怎么打开,小程序微信认证,小程序微信授权登录,小程序微信开发平台,小程序微信认证,小程序微信认证,内容如对您有帮助，希望把文章链接给更多的朋友！

在本文中你将收获

小程序如何使用自定义组件自定义组件之间的传值自定义组件中插槽的使用2- 组件文件新建2.1 定义组件

在根目录新建components文件夹，建立cell 文件夹，右击创建cell的Component组件

cell.jscell.wxmlcell.jsoncell.wxss2.2 注册组件

页面的xxx.json ，usingComponent注册

"usingComponents": {"item":"/components/item/item"}2.3 使用组件<item></item>2.4 图参考

3- 外部类和样式隔离3.1定义组件cell.wxml 文件<view class="cell cell-class"></view>cell.wxss/* pages/com/com.wxss */.cell{ color: tomato;}.mycell{ color: #f70; line-height: 120rpx !important;}cell.js 文件 /* 选项 */ options:{ /* 样式隔离：apply-shared 父影响子 shared 父子相互影响 isolated 相互隔离 */ styleIsolation:'isolated', }, //通过组件的外部类实现父组件控制自己的样式 externalClasses:["cell-class"],3.2 使用组件<cell></cell><cell cell-class="mycell"></cell>

3.3 图解释

4- 组件插槽4.1 默认插槽cell.wxml <view class="cell"> 我是cell组件 <slot></slot></view>cell.js /* 选项 */ options:{ //允许多个插槽 multipleSlots:true, },cell.wxss.cell{ height: 88rpx; line-height: 88rpx; border-bottom: 1rpx solid #cccccc;}使用cell组件<cell> <text>放假</text> <text>快点到来</text></cell>

4.2 命名多插槽cell.wxml <view class="cell cell-class"> <slot name="pre"></slot> 我是cell组件 <slot></slot> <slot name="next"></slot></view>cell.js /* 选项 */ options:{ //允许多个插槽 multipleSlots:true, },cell.wxss.cell{ height: 88rpx; line-height: 88rpx; border-bottom: 1rpx solid #cccccc;}com.wxml<!-- 插槽 --><cell> <text slot="pre">🐱‍👓</text> <text slot="next">🐱‍🚀</text> <text>放假</text> <text>快点到来</text></cell><cell cell-class="mycell"> <text slot="next">🎉</text> <text slot="pre">🐱‍</text> <text>做核酸</text> <text>今天要做</text></cell>

5- 组件传参5.1 父传子5.1.1 定义组件cell.wxml<view class="cell"> <text>{{title}}</text> <text>{{num}}</text></view>cell.js// components/cell/cell.jsComponent({ /* 选项 */ options:{ /* 样式隔离：apply-shared 父影响子 shared 父子相互影响 isolated 相互隔离 */ styleIsolation:'isolated', //允许多个插槽 multipleSlots:true, }, /** * 组件的属性列表 */ properties: { title:{ type:String, value:"" }, num:{ type:Number, value:1 } }, /** * 组件的初始数据 */ data: { //定义组件自己的数据count count:1 }, /** * 组件的方法列表 */})5.1.2 使用组件com.wxml<cell title="做核酸" num="{{5}}"></cell><cell title="烦呐"></cell> 5.1.3 图解

5.2 子传参父5.2.1 定义组件cell.wxml<view class="cell" bindtap="tapHd"> <text>{{title}}</text> <text>{{count}}</text></view>cell.js// components/cell/cell.jsComponent({ /* 选项 */ options:{ /* 样式隔离：apply-shared 父影响子 shared 父子相互影响 isolated 相互隔离 */ styleIsolation:'isolated', //允许多个插槽 multipleSlots:true, }, /** * 组件的属性列表 */ properties: { title:{ type:String, value:"" }, num:{ type:Number, value:1 } }, /** * 组件的初始数据 */ data: { //定义组件自己的数据count count:1 }, lifetimes:{ //在组件生命周期attached挂载更新count attached(){ console.log(this.data); //count 的值为父组件传递的num值 this.setData({count:this.data.num}) } }, /** * 组件的方法列表 */ methods: { tapHd(){ this.setData({count:this.data.count+5}) //发送一个事件 this.triggerEvent("cellclick",this.data.count) } }})5.2.2 使用组件com.wxml <view class="cell" bindtap="tapHd"> <text>{{title}}</text> <text>{{count}}</text></view> 5.2.3 图解

6- 案例item组件6.1 定义组件首先在根目录下创建一个专门放自定义组件的文件夹；然后在小程序编辑器里，右键，新建Component；

<!--components/item/item.wxml--><navigator class="item itemclass" url="{{url}}" open-type="{{openType}}" bindtap="itemclick"> <view class="icon" wx:if="{{icon}}"> <image src="{{icon}}" mode="aspectFill"/> </view> <view class="content"> <view class="title" wx:if="{{title}}"> {{title}} </view> <slot name="title" wx:else ></slot> <view class="right" wx:if="{{!showrslot}}"> <view class="tip">{{tip}}</view> <view class="badge" wx:if="{{badge}}"> <view wx:if="{{badge===true}}" class="dot"> </view> <view wx:else class="redbadge">{{badge}}</view> </view> <view class="arrow"></view> </view> <slot name="right" wx:else></slot> </view></navigator>/* components/item/item.wxss */.item{ line-height: 88rpx; display: flex; align-items: center; justify-content: space-between;}.icon{ margin-left: 30rpx; margin-right: 30rpx; height: 100%; display: flex; align-items: center;}.icon image{ width: 60rpx; height: 60rpx;}.content{ padding: 0 30rpx; border-bottom: 1rpx solid #ccc; display: flex; flex: 1;}.title{ flex: 1; color: #333; font-size: 35rpx;}.right{ display: flex; align-items: center;}.right .arrow{ height: 25rpx; width: 25rpx; border-top: 3rpx solid #999; border-right: 3rpx solid #999; transform: rotate(45deg);}.tip{ color: #999; font-size: 28rpx;}.dot{ height: 15rpx; width: 15rpx; background-color: #f30; margin-left: 15rpx; border-radius: 50%;}.redbadge{ font-size: 20rpx; padding: 5rpx; background-color: #f30; width: 30rpx; max-height: 30rpx; line-height: 30rpx; color: #fff; text-align: center; margin-left: 15rpx; border-radius: 20rpx;}6.2 使用组件引入组件：在页面的 json 文件中进行引用