微信小程序自定義組件的實(shí)現(xiàn)方法及自定義組件與頁面間的數(shù)據(jù)傳遞問題

更新時(shí)間：2018年10月09日 17:16:41 作者：偉笑

這篇文章主要介紹了微信小程序自定義組件的實(shí)現(xiàn)方法及自定義組件與頁面間的數(shù)據(jù)傳遞 ,需要的朋友可以參考下

首先我們?cè)趐ages文件夾下創(chuàng)建components目錄用于存放自定義組件。如圖所示，以我創(chuàng)建的dialog組件為例，自定義組件的格式與頁面一樣，分為4個(gè)文件。

圖1

圖2

如上圖2所示，假如index頁面有一個(gè)按鈕觸發(fā)點(diǎn)擊事件后彈出dialog，并且當(dāng)點(diǎn)擊某個(gè)部門時(shí)，將dialog關(guān)閉，并將部門名稱與紅色標(biāo)題同步。

一、首先把dialog組件的樣式寫好，并在index頁面相應(yīng)的位置引用。以下就是代碼啦（分別為：wxml、wxss、js、json）

 <view class='wx_dialog_container' hidden="{{!isShow}}">
 <view class='wx-mask' bindtap='close'></view>
 <view class='wx-dialog'>
 <text class='li' bindtap='groupClick' wx:for="{{items}}" data-index='{{index}}' wx:for-item="item">{{item.department}}</text> 
 </view>
 </view>

.wx_dialog_container{
 width: 100%;
 height: 100%;
 z-index: 999;
}
.wx-mask{
 position: fixed;
 z-index: 1000;
 top: 0;
 right: 0;
 left: 35%;
 bottom: 0;
 background: rgba(0, 0, 0, 0.3);
}
.wx-dialog{
 position: fixed;
 min-width: 528rpx;
 height: 100%;
 left: 0;
 top:314px;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 background-color: #FFFFFF;
 text-align:left;
}
.wx-dialog .li{
 display: block;
 font-size: 18px;
 margin-top:28px;
 margin-left:154px;
}

Component({
 properties: {
 
 },
 data: {
 isShow: false,
 animationData: {},
 color:"#000",
 items:[
 { department: '研發(fā)部'},
 { department: '設(shè)計(jì)部' },
 { department: '人事部'},
 { department: '銷售部' },
 { department: '市場運(yùn)營部' },
 ]
 },

 methods: {
 show: function () {
 this.setData({
 isShow: true
 });
 },
 
 close: function () {
 this.setData({
 isShow: false
 })
 },

 // 自定義組件與頁面之間的數(shù)據(jù)通信
 groupClick: function (e){
 var group = this.data.items[e.target.dataset.index]
 console.log(group)
 // 使用 triggerEvent 方法觸發(fā)自定義組件事件，指定事件名、detail對(duì)象和事件選項(xiàng)
 this.triggerEvent('okEvent', { group}, {})
 
 
 this.setData({
 isShow: false

 })
 },
 
 },
})

{
 "component": true
}

最后一步別忘了在你相應(yīng)的頁面中引用它，注意：自定義組件名稱要和components目錄下的一致。如下圖我在index.wxml中使用它

二、組件與頁面怎么數(shù)據(jù)通信呢？

•首先要知道你點(diǎn)擊的是列表中的哪個(gè)部門，所有要為列表元素添加一個(gè) groupClick事件打印出事件對(duì)象 e ，我們發(fā)現(xiàn)我們要的數(shù)據(jù)在e.target.dataset.index里
•已經(jīng)得到數(shù)據(jù)對(duì)象了，下一步就是想辦法把它傳遞給 index頁面更新數(shù)據(jù)。在當(dāng)前頁面想要獲取組件中的某一狀態(tài)，需要使用到this.triggerEvent(' ',{},{}),第一個(gè)參數(shù)是自定義事件名稱，所以還要在組件身上綁定個(gè)自定義事件，第二個(gè)對(duì)象就是你要傳遞的數(shù)據(jù)，第三個(gè)一般不用（代碼參見標(biāo)黃部分）
•最后就是在頁面的index.js中定義這個(gè)事件來接收dialog的數(shù)據(jù)，并打印出 e 找到數(shù)據(jù)更新數(shù)據(jù)。（如下代碼）

// 接受triggerEvent 方法觸發(fā)的自定義組件事件來更新同步數(shù)據(jù)
 okEvent: function (e) {
 console.log(e)
 this.setData({
 groupName: e.detail.group.department
 })
 
 },

三、最后一個(gè)小知識(shí)

如果想在 index.js邏輯中引用dialog.js 中methods里定義好的方法，需要在index.js 中添加如下代碼

 onReady: function () {
 this.dialog = this.selectComponent('#dialog');
 },

比如：我把show、close 方法定義在了組件中的methods 里，要在index頁面中觸發(fā)某個(gè)時(shí)間讓dialog展示，只需在index.js 中這么寫即可。

總結(jié)

以上所述是小編給大家介紹的微信小程序自定義組件的實(shí)現(xiàn)方法及自定義組件與頁面間的數(shù)據(jù)傳遞，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: