在小程序开发中，为了提高代码效率，和代码使用率，我们也用到了组件封装，
今天我介绍下如何在小程序中封装一个头部公用组件
首先，所有父组件（调用页面）的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 >我们这动手动触发是在父组件点击头部组件来触事件，我们还可以稍微改动下，在子组件中添加方法就可以同时触发父组件的触发方法
【在子组件有表单的时候，该方法就很明显，如果在父组件中的子组件引用区域填写表单就可以触发表单验证】
View Code
View Code
View Code
子组件：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 () {
},
})
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
