微信小程序（十八）组件通信（父传子）

注释很详细，直接上代码

上一篇

新增内容：

1.组件属性变量的定义

2.组件属性变量的默认状态

3.组件属性变量的传递方法

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

源码：
myNav.js

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

myNav.wxml

<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

.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

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

效果演示：