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

注释很详细,直接上代码

上一篇

新增内容:
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>

效果演示:

相关推荐
流***陌8 小时前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序
亮子AI11 小时前
【小程序】微信小程序点击效果(view、button、navigator)
微信小程序·小程序
Q_Q51100828511 小时前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php
future_studio11 小时前
聊聊 Unity(小白专享、C# 小程序 之 加密存储)
开发语言·小程序·c#
炒毛豆12 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
從南走到北12 小时前
洗车小程序系统
微信小程序·小程序
namehu14 小时前
前端性能优化之:图片缩放 🚀
前端·性能优化·微信小程序
dazhong201214 小时前
微信小程序开发实战指南(三)-- Webview访问总结
微信小程序·小程序
计算机毕业设计小帅14 小时前
【2026计算机毕业设计】基于Springboot的校园失物招领小程序
spring boot·小程序·课程设计
盛夏绽放16 小时前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app