微信小程序自定義組件Component的代碼詳解
更新時間：2023年03月02日 10:21:36 作者：前端小媛
這篇文章主要給大家介紹了關(guān)于微信小程序自定義組件Component的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
1- 前言
在本文中你將收獲
- 小程序如何使用自定義組件
- 自定義組件之間的傳值
- 自定義組件中插槽的使用
2- 組件文件新建
2.1 定義組件
在根目錄新建components文件夾，建立cell 文件夾，右擊創(chuàng)建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',
},
//通過組件的外部類實現(xiàn)父組件控制自己的樣式
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
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
//定義組件自己的數(shù)據(jù)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
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
//定義組件自己的數(shù)據(jù)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})
//發(fā)送一個事件
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 定義組件
- 首先在根目錄下創(chuàng)建一個專門放自定義組件的文件夾；
- 然后在小程序編輯器里，右鍵，新建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 中像使用基礎(chǔ)組件一樣使用自定義組件（名字和聲明的保持一致）
<!-- 引用組件的wxml文件 -->
<!--pages/component/component.wxml-->
<item title="支付" icon="/images/icon01.png"></item>
<item title="相冊" icon="/images/icon02.png"></item>
<item title="設(shè)置" ></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="服務(wù)" 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;
}
總結(jié)
到此這篇關(guān)于微信小程序自定義組件Component的文章就介紹到這了,更多相關(guān)微信小程序自定義組件Component內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript與函數(shù)式編程解釋...2007-04-04
這篇文章主要介紹了JS+canvas動態(tài)繪制餅圖的方法,結(jié)合具體實例形式分析了js+canvas實現(xiàn)餅狀圖形繪制的相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
微信小程序?qū)崿F(xiàn)MUI數(shù)字輸入框效果
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)MUI數(shù)字輸入框效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
IE9+已經(jīng)不對document.createElement向下兼容的解決方法
這篇文章主要介紹了IE9+已經(jīng)不對document.createElement向下兼容的解決方法,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了通過url查找a元素的實現(xiàn)思路，解決一些比較實際的問題，感興趣的朋友可以參考下2014-04-04
在將uniapp打包成APP端時,上架到應(yīng)用市場的時候需要配置隱私彈窗,下面這篇文章主要給大家介紹了關(guān)于如何在uniapp中設(shè)置隱私政策彈窗的相關(guān)資料,需要的朋友可以參考下2023-01-01
從JavaScript的函數(shù)重名看其初始化方式...2007-03-03
這篇文章主要為大家詳細介紹了JS實現(xiàn)燈泡開關(guān)特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
IE DOM實現(xiàn)存在的部分問題及解決方法2009-07-07
innerHTML 屬性的使用非常流行，因為他提供了簡單的方法完全替代一個 HTML 元素的內(nèi)容。另外一個方法是使用 DOM Level 2 API（removeChild, createElement, appendChild）。但很顯然，使用 innerHTML 修改 DOM tree 是非常容易且有效的方法。2008-06-06