微信小程序自定义组件Component的代码详解
更新时间：2023年03月02日 10:21:36 作者：前端小媛
这篇文章主要给大家介绍了关于微信小程序自定义组件Component的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
1- 前言
在本文中你将收获
- 小程序如何使用自定义组件
- 自定义组件之间的传值
- 自定义组件中插槽的使用
2- 组件文件新建
2.1 定义组件
在根目录新建components文件夹，建立cell 文件夹，右击创建cell的Component组件
- cell.js
- cell.wxml
- cell.json
- cell.wxss
2.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.js
Component({
/* 选项 */
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.js
Component({
/* 选项 */
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 文件中进行引用声明;
<!-- 引用组件的json文件 -->
{
"usingComponents": {
"cell": "/components/cell/cell"
}
}
在页面的 wxml 中像使用基础组件一样使用自定义组件（名字和声明的保持一致）
<!-- 引用组件的wxml文件 -->
<!--pages/component/component.wxml-->
<item title="支付" icon="/images/icon01.png"></item>
<item title="相册" icon="/images/icon02.png"></item>
<item title="设置" ></item>
<item title="朋友圈" icon="/images/icon03.png" badge="{{true}}" tip="10条消息未读"></item>
<item title="卡包" icon="/images/icon04.png" badge="{{12}}" tip="12条消息未读"></item>
<item title="服务" icon="/images/icon05.png" showrslot="{{true}}">
<switch checked="true" slot="right" />
</item>
<item>
<view slot="title">插槽title</view>
</item>
<item title="新闻" icon="/images/icon07.png" url="/pages/index/index" open-type="switchTab"></item>
<item title="life" icon="/images/icon08.png" url="/pages/life/life" ></item>
<item title="消息" icon="/images/icon06.png" showrslot="{{true}}" itemclass="myitem">
<switch checked="true" slot="right" />
</item>
.myitem{
line-height: 120rpx !important;
background-color: #f0f0f0;
}
总结
到此这篇关于微信小程序自定义组件Component的文章就介绍到这了,更多相关微信小程序自定义组件Component内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Array没有indexOf方法，这样在一个数组中查找某个元素的索引时比较麻烦，于是通过prototype原型扩展了Array.prototype.indexOf(),在对数组进行遍历的时候却出现了问题2013-04-04
浅谈Sublime Text 3运行JavaScript控制台
下面小编就为大家带来一篇浅谈Sublime Text 3运行JavaScript控制台。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
下面小编就为大家带来一篇javascript的列表切换【实现代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。2016-05-05
这篇文章主要介绍了JS简单设置下拉选择框默认值的方法,涉及javascript针对页面元素的遍历、查找及设置技巧,需要的朋友可以参考下2016-08-08
js-utils封装了常用的工具函数,开箱即用,下面这篇文章主要给大家介绍了关于能够事半功倍的JS utils工具函数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了JS原生实现轮播图的几种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
下面小编就为大家带来一篇JavaScript来实现打开链接页面的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
js变量作用域及可访问性的探讨...2006-11-11
这篇文章主要为大家详细介绍了js实现精确到秒的倒计时效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要为大家介绍了JavaScript解构赋值，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
最新评论