微信小程序(十八)组件通信(父传子)

注释很详细,直接上代码

上一篇

新增内容:
1.组件属性变量的定义
2.组件属性变量的默认状态
3.组件属性变量的传递方法

解释一下为什么是父传子,因为组件是页面的一部分,数据是从页面传递到组件的,所以是父传子(以免和下一篇的子传父混淆)

源码:
myNav.js

js 复制代码
	//位于js的第一级中
  /**
   * 组件的属性列表
   */
  properties: {
  		//字段名
        back:{
        	//类型
            type:Boolean,
            //值
            value:false
        }
  }

myNav.wxml

xml 复制代码
<view class="navigationBar custom-class" style="padding-top: {{test}}px;">
    <view class="navigationBarTitle title-class">
		//当back为真时才会出现"返回"
		//navigateBack可以实现返回上一级
        <navigator class="back" wx:if="{{back}}" open-type="navigateBack">返回</navigator>
       123
    </view>
</view> 

myNav.wxss

css 复制代码
.navigationBar{
    background-color: cornflowerblue;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.navigationBarTitle{
    font-weight: bold;
}
.back{
	//因为上一级已经设置居中,这样配置可以让选择出现的组件出现在左上角
    position: absolute;
    left: 20rpx;
}

form.wxml

xml 复制代码
//这里传值true
//注意传值的形式,如果是"false"则表示的是字符串
<myNav custom-class="color-pink" back="{{true}}">
</myNav>

效果演示:

相关推荐
木易 士心20 小时前
组织架构树形选择组件使用说明(Vue3 + UniApp)
微信小程序·钉钉·notepad++
软件技术员21 小时前
微信小程序电子测宅堪墓风水罗盘
微信小程序·小程序
future_studio21 小时前
聊聊 Unity(小白专享、C# 小程序 之 播放器)
unity·小程序·c#
Q_Q51100828521 小时前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
小Tomkk1 天前
Rokid 开发空间小程序 实战
3d·小程序·rokid·jsar
说私域1 天前
基于多模态AI技术的传统行业智能化升级路径研究——以开源AI大模型、AI智能名片与S2B2C商城小程序为例
人工智能·小程序·开源
2501_916007471 天前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者81 天前
FTP 抓包分析实战,命令、被动主动模式要点、FTPS 与 SFTP 区别及真机取证流程
运维·服务器·网络·ios·小程序·uni-app·iphone
努力就够了1 天前
微信小程序:日常零售供应系统
微信小程序·erp·接单·零售系统
说私域1 天前
基于开源AI大模型、AI智能名片与S2B2C商城小程序的购物中心精准零售数据架构研究
人工智能·小程序·开源