在小程序開發中，為了提高代碼效率，和代碼使用率，我們也用到了組件封裝，
今天我介紹下如何在小程序中封裝一個頭部公用組件
首先，所有父組件（調用頁面）的json文件都要引用子組件:index.json
{ "usingComponents": { "header": "../../component/header/header", } }
一，組件定義(封裝)
子組件：header.wxml
<view name='header' class="header" id='header'> <text>{{userInfo.nickName}}</text> <view class='icon-box-r'><image class='icon-img' src='{{userInfo.avatarUrl}}'></image></view> </view >
子組件：header.js
// component/header/header.js Component({ /** * 組件的屬性列表 */ properties: { }, /** * 組件的初始數據 */ data: { userInfo:[ {nickName:'username',avatarUrl:'userImg.jpg'} ], }, /** * 組件的方法列表 */ methods: { }, })
在父組件(調用頁面)使用我們封裝好的組件：index.wxml
<view class='header-box'> <header></header> </view>
———————————————————————————————————————————————————————————————————————————————————————————————————————————————————
二，父組件（調用頁面）向子組件傳值通訊
父組件（調用頁面）：index.wxml
<view class='header-box'> <header userInfoName="{{userInfo.nickName}}" userInfoImg="{{userInfo.avatarUrl}}" ></header> </view>
父組件（調用頁面）：index.js
// pages/index/index.js Page({ /** * 頁面的初始數據 */ data: { userInfo:[ {nickName:'username',avatarUrl:'userImg.jpg'} ] }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { }, /** * 生命周期函數--監聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數--監聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數--監聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數--監聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關事件處理函數--監聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數 */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { }, })
子組件：header.wxml
<view name='header' class="header" id='header'> <text>{{userInfo.nickName}}</text> <view class='icon-box-r'><image class='icon-img' src='{{userInfo.avatarUrl}}'></image></view> </view >
子組件：header.js
// component/header/header.js Component({ /** * 組件的屬性列表 */ properties: { userInfoName: { type: String }, userInfoImg: { type: String } }, /** * 組件的初始數據 */ data: { userInfo:[ {nickName:'username',avatarUrl:'userImg.jpg'} //若父組件無值傳來，此處值可作默認值 ], }, /** * 組件的方法列表 */ methods: { }, })
———————————————————————————————————————————————————————————————————————————————————————————————————————————————————
二，子組件向父組件（調用頁面）傳值通訊
子組件向父組件傳值會有2種情況
1，手動觸發傳值
2，自動觸發傳值
先來說第一種：手動觸發
子組件：header.wxml
<view name='header' class="header" id='header'> <text>{{userInfo.nickName}}</text> <view class='icon-box-r' ><image class='icon-img' src='{{userInfo.avatarUrl}}'></image></view> </view >
我們這動手動觸發是在父組件點擊頭部組件來觸事件，我們還可以稍微改動下，在子組件中添加方法就可以同時觸發父組件的觸發方法
【在子組件有表單的時候，該方法就很明顯，如果在父組件中的子組件引用區域填寫表單就可以觸發表單驗證】
// component/header/header.js Component({ /** * 組件的屬性列表 */ properties: { }, /** * 組件的初始數據 */ data: { userInfo:[], }, /** * 組件的方法列表 */ methods: { getCode:function(e){ //處理邏輯。。。。 this.userInfo(e) //一定傳參數 e }， userInfo:function(){ var that = this; var that = this; var val = e.detail.value == undefined ? that.data.codes : e.detail.value; var userInfo = wx.getStorageSync('userInfo'); //獲取本地緩存中的用戶信息 var myUserInfo = { val: userInfo, nickNameTo:val } this.triggerEvent('userInfo', myUserInfo); if (userInfo) { this.setData({ userInfo: userInfo, }) } else { wx.redirectTo({ url: '../../pages/menu/menu' }) } // console.log("userInfo-----///---->", userInfo); }, }, })
<view name='header' class="header" id='header'> <text>{{userInfo.nickName}}</text> <view class='icon-box-r' ><image class='icon-img' src='{{userInfo.avatarUrl}}'></image></view> <view class="section"> <view class="section__title">你輸入的用戶名是：{{userInfo.nickName}}</view> <input bindinput="bindKeyInput" placeholder="輸入同步到父組件中" /> </view> </view >
<view class='header-box'> <header id="header" bind:userInfo="onUserInfo"></header> </view> <text>{{userInfo.nickName}}</text> <view class='icon-box-r'><image class='icon-img' src='{{userInfo.avatarUrl}}'></image></view> <text>{{userInfo.nickNameTo}}</text>
子組件：header.js
// component/header/header.js Component({ /** * 組件的屬性列表 */ properties: { }, /** * 組件的初始數據 */ data: { userInfo:[], }, /** * 組件的方法列表 */ methods: { userInfo:function(){ var that = this; var userInfo = wx.getStorageSync('userInfo'); //獲取本地緩存中的用戶信息 var myUserInfo = { val: userInfo } this.triggerEvent('userInfo', myUserInfo); if (userInfo) { this.setData({ userInfo: userInfo, }) } else { wx.redirectTo({ url: '../../pages/menu/menu' }) } // console.log("userInfo-----///---->", userInfo); }, }, })
父組件（調用頁面）：index.wxml
<view class='header-box'> <header id="header" bind:userInfo="onUserInfo"></header> </view> <text>{{userInfo.nickName}}</text> <view class='icon-box-r'><image class='icon-img' src='{{userInfo.avatarUrl}}'></image></view>
父組件（調用頁面）：index.js
// pages/index/index.js Page({ /** * 頁面的初始數據 */ data: { userInfo:[] }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { }, /** * 生命周期函數--監聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數--監聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數--監聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數--監聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關事件處理函數--監聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數 */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { }, onUserInfo: function (e) { this.setData({ userInfo:e.detail.myUserInfo //賦值到父組件的data集合 }) }, })
第二種自動觸發
先來說第一種：自動觸發
子組件：header.wxml
<view name='header' class="header" id='header'>
<text>{{userInfo.nickName}}</text>
<view class='icon-box-r' ><image class='icon-img' src='{{userInfo.avatarUrl}}'></image></view>
</view >
子組件：header.js
// component/header/header.js Component({ /** * 組件的屬性列表 */ properties: { }, /** * 組件的初始數據 */ data: { userInfo:[], }, /** * 組件的方法列表 */ methods: { userInfo:function(){ var that = this; var userInfo = wx.getStorageSync('userInfo'); //獲取本地緩存中的用戶信息 if (userInfo) { this.setData({ userInfo: userInfo, }) } else { wx.redirectTo({ url: '../../pages/menu/menu' }) } return userInfo; // console.log("userInfo-----///---->", userInfo); }, }, })
父組件（調用頁面）：index.wxml
<view class='header'> <header id="header"></header> </view> <text>{{userInfo.nickName}}</text> <view class='icon-box-r'><image class='icon-img' src='{{userInfo.avatarUrl}}'></image></view>
父組件（調用頁面）：index.js
// pages/index/index.js Page({ /** * 頁面的初始數據 */ data: { userInfo:[] }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { }, /** * 生命周期函數--監聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數--監聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數--監聽頁面隱藏 */ onHide: function () { var that = this; var userInfo = this.selectComponent("#header").userInfo(); //調用頭部組件用戶狀態 if (userInfo){ this.setData({ userInfo:userInfo }) } }, /** * 生命周期函數--監聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關事件處理函數--監聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數 */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { }, })