微信小程序——父子组件传参以及方法的调用

父组件向子组件传参

A组件为父组件，B组件为子组件，以下是A组件向B组件传参

在A组件中引入B组件（父组件引入子组件）

在A组件的json中写入（父组件）：

{
    "component": true,
    "usingComponents": {
       "componentB": "../child/child"
    }
}

在A组件的wxml中写入（父组件）：

我是组件A

   子组件内容：
   

在B组件的js中写入（子组件）： 

Component({
    behaviors: [],
    properties: {  //即在properties中定义父组件要传过来的参数类型，与vueprops类似
        paramAtoB:String
    },
    data: {},  

    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },

    methods: {
 
    }
})

在B组件的wxml中写入（子组件）：

  我是子组件B
  A中传入的参数：{{paramAtoB}}

总结： A组件向B组件传参，实际上就是在A组件中引入B组件的时候，带上一个属性paramAtoB，并且给其赋值，然后B组件通过这个属性名称paramAtoB，获取其值

或者   在methods的自定义函数里面通过this.data.paramAtoB就能接收到

调用子组件方法

父组件引子组件  component-name，然后通过id来调用方法（注：此案例与上面案例没任何联系）

onload(){
    this.selectComponent("#componentId").subComponentMethod();
}

 

子组件向父组件传参

要让子组件给父组件传参，首先得在父组件引入子组件的时候，加个触发事件，如下：

在子组件B中wxml:

    我是组件B
    A中传入的参数：{{paramAtoB}}
    向A中传入参数

button按钮点击事件一触发，就可以传入参数进入父组件A中，在子组件B中js:

Component({
    behaviors: [],
    properties: {
        paramAtoB:String
    },
    data: {}, 
 
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
 
    methods: {
        change:function(){
            this.triggerEvent('myevent', { paramBtoA:123});
        }
    }
})

在父组件A中wxml:

    我是组件A
    
        A组件内容：
        B组件传入参数：{{paramBtoA}}
        
    

在父组件A中js:

Component({
    behaviors: [],
    properties: {
 
    },
    data: {}, 

    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
 
    methods: {
        onMyEvent:function(e){   //onMyEvent就是当被子组件触发时的函数
            this.setData({
                paramBtoA: e.detail.paramBtoA
            })
        }
    }
})

 

另外介绍：

比如子组件中一个输入框的值

我们在子组件中的method中定义一个函数，即wxml中bindinput的bindCode方法：

bindCode: function (e) {
      var that = this;
      var val = e.detail.value; //通过这个传递数据
      var myEventDetail = {
        val: val
      } // detail对象，提供给事件监听函数
      this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件，父组件中使用
}

父组件要获取：

**bind:myevent="onGetCode"**父组件的定义事件（myevent是子组件传递过来的自定义事件名称）
//事件函数 ，e.detail.val就是需要的值
onGetCode:function(e){
    this.setData({
      code:e.detail.val
    })
  },