• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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

首先，所有父组件（调用页面）的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 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.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 () {

  },

  
})

 

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
微信小程序开发之 下拉刷新，上拉加载更多发布时间：2022-07-18
下一篇：
使用mpvue开发github小程序总结发布时间：2022-07-18
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap