Bootstrap

微信小程序父子组件传值

d父组件向子组件传值

首先在页面json文件中引入组件:

第二步在页面中使用组件并向组件中传入两个对象:

第三步 在子组件中接收传入的数据



Component({
    /**
     * 组件的属性列表
     */
    properties: {
        memberDetail: {
            type: Object,
            value: {}
        },
        userInfo: {
            type: Object,
            value: {}
        },
    },
    /**
     * 组件的初始数据
     */
    data: {

    },
    /**
 * 监听传入的值改变
 */
    observers: {
        'userInfo': function (newUserInfo) {
            if (newUserInfo) {
                // 当监听到 userInfo有变化时执行 
 
            }
        }
    },

    /**
     * 组件的方法列表
     */
    methods: {
       
    }
})

如果想要在子组件properties中修改传入的值,还是直接用this.setData就可以。如果要修改传入对象的某个属性值,在属性上加个单引号就可以了。

 this.setData({
                        'memberDetail.remark': e.detail.value
                    })

子组件向父组件传值

在子组件修改的值要想传给父组件,使用 this.triggerEvent和vue的$emit是一样的,例如:

 // e.detail.value是我要给父组件传的值
this.triggerEvent('send', e.detail.value)

在父组件接收,只需要绑定send方法就可以

  <users bindsend="send" memberDetail="{{memberDetail}}" userInfo="{{userInfo}}"></users>

 当收到子组件传过来的send方法后 就可以在父组件中打印出传过来的值。

 send(e){
        console.log(e.detail,'父组件传过来的e')
      
    },

;