微信小程序父子组件传值

父组件向子组件传值

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

{
    "component": true,
    "usingComponents": {
        "users": "./components/users"
    },
    "navigationBarTitleText": "会员详情页"
}

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

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

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

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')
      
    },

父组件调用子组件中的方法

首先，我们在自定义组件methods定义一个 getData方法，用于获取数据或者其他操作。

接下来，在页面中使用这个组件，并在相应的地方调用组件中的方法。

// page.js  
Page({  
  onReachBottom() {  
    // 获取组件实例  #myComponent是在页面wxml中引入组件是给的id='#myComponent'
    const myComponent = this.selectComponent('#myComponent');  
    
    // 调用组件中的 getData方法  
    if (myComponent) {  
      myComponent.getData();  
    }  
  }  
});