小程序父子组件传值

1.父传子

父组件组件传递子组件通过属性传值，例如tranBool="{{Bool}}"的形式将变量Bool传递给子组件，如果不传变量的话可以不用加花括号。

父组件

//wxml
<view>
    <childComponent 
            tranBool="{{Bool}}" 
            tranString="hello world"/>
</view>

//js
Page({
    data: {
        Bool:false
    }
})

子组件

子组件获取properties里的值可以在组件生命周期的attached或者 ready通过this.data.来访问。

//wxml
<view>
    <view>{{tranBool}}</view>
    <view>{{tranString}}</view>
</view>

//js
Component({
    properties: {
        tranBool: {
            type: Boolean,
            value: true
        },
        tranString: {
            type: String,
            value: ''
        }
        //tranBool: Boolean, // 简化的定义方式
        //tranString: Boolean // 简化的定义方式
    },
    lifetimes: {
        attached() {
            // 在组件实例进入页面节点树时执行
            console.log(this.data.tranBool)
            console.log(this.data.tranString)
        },
        ready() {
            // 在组件在视图层布局完成后执行
            console.log(this.data.tranBool)
            console.log(this.data.tranString)
        }
    }
})

2.子传父（triggerEvent）

triggerEvent方法可以把组件内部的数据传到外面，触发组件外的事件。它接收3个参数：

this.triggerEvent('myevent', myEventDetail, myEventOption)。

myEventDetail和myEventOption都是对象，myEventDetail是传到组件外的数据，myEventOption有三个参数可以设置：

• bubbles 默认false 事件是否冒泡
• composed 默认false 事件是否可以穿越组件边界
• capturePhase 默认false 事件是否拥有捕获阶段

子组件

//wxml
<view>
    <view bindtap="changeStatus">点击我传递父组件</view>
</view>

//js
Component({
    properties: {
        tranBool: {
            type: Boolean,
            value: true
        }
    },
    methods:{
        changeStatus(){
            this.triggerEvent('myevent', this.data.tranBool)
        }
    }
})

父组件

//wxml
<view>
    <childComponent 
        tranBool="{{Bool}}" 
        bind:myevent="changeStatus" />
</view>

//js
Page({
    data: {
        Bool: false
    },
    changeStatus(val) {
        this.setData({
            Bool: !val.detail
        })
    }
})