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

注释很详细,直接上代码

上一篇

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

效果演示:

相关推荐
2501_915918415 小时前
HTTPS 端口号详解 443 端口作用、iOS 抓包方法、常见 HTTPS 抓包工具与网络调试实践
android·网络·ios·小程序·https·uni-app·iphone
小蒜学长7 小时前
基于springboot 校园餐厅预约点餐微信小程序的设计与实现(代码+数据库+LW)
数据库·spring boot·微信小程序
cookqq7 小时前
Cursor和Hbuilder用5分钟开发微信小程序
微信小程序·小程序·curosor
老华带你飞8 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
毕设源码-钟学长9 小时前
【开题答辩全过程】以 基于微信小程序的美发服务系统的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
canglingyue10 小时前
微信小程序罗盘功能开发指南
微信小程序·小程序
三脚猫的喵13 小时前
微信小程序中实现AI对话、生成3D图像并使用xr-frame演示
前端·javascript·ai作画·微信小程序
2501_9151063214 小时前
App Store 软件上架全流程详解,iOS 应用发布步骤、uni-app 打包上传与审核要点完整指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬14 小时前
UniApp微信小程序-实现蓝牙功能
微信小程序·uni-app
开发加微信:hedian11616 小时前
微信推客小程序系统开发技术实践
微信·小程序