美文网首页
小程序父子组件传值

小程序父子组件传值

作者: _hider | 来源:发表于2019-04-24 14:41 被阅读0次

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)。

myEventDetailmyEventOption都是对象,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
        })
    }
})

相关文章

网友评论

      本文标题:小程序父子组件传值

      本文链接:https://www.haomeiwen.com/subject/mdiqgqtx.html