小程序开发 组件定义(封装)、组件调用、父子组件方法调用、父子组件传值通讯

在小程序开发中,为了提高代码效率,和代码使用率,我们也用到了组件封装,

今天我介绍下如何在小程序中封装一个头部公用组件

首先,所有父组件(调用页面)的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.jsComponent({ /** * 组件的属性列表 */ 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.jsPage({ /** * 页面的初始数据 */ 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.jsComponent({ /** * 组件的属性列表 */ 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.jsComponent({ /** * 组件的属性列表 */ 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 Code

技术分享图片
技术分享图片

<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 Code

技术分享图片
技术分享图片

<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>

View Code

 

子组件:header.js

// component/header/header.jsComponent({ /** * 组件的属性列表 */ 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.jsPage({ /** * 页面的初始数据 */ 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.jsComponent({ /** * 组件的属性列表 */ 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.jsPage({ /** * 页面的初始数据 */ 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 () { }, })

 

相关文章