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

注释很详细,直接上代码

上一篇

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

效果演示:

相关推荐
00后程序员张13 分钟前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差10 小时前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张11 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬12 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_9151063212 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI13 小时前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_1772972206914 小时前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧
weixin_lynhgworld14 小时前
剧本杀小程序系统开发:开启沉浸式社交娱乐新纪元
小程序·娱乐
~废弃回忆 �༄16 小时前
mobx-miniprogram小程序的数据传输
小程序
说私域18 小时前
“开源AI智能名片链动2+1模式S2B2C商城小程序”在直播公屏引流中的应用与效果
人工智能·小程序·开源