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

父组件向子组件传参

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

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

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

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

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

<view>我是组件A</view>
<view>
   <view>子组件内容：</view>
   <componentB paramAtoB='我是父组件向子组件传的参数'/>
</view>

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

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

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

    methods: {
 
    }
})

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

<view style='border:2px solid gray;'>
  <view style='text-align:center;'>我是子组件B</view>
  <view>A中传入的参数：{{paramAtoB}}</view>
</view>

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

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

调用子组件方法

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

<component-name id="componentId"></component-name>

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

子组件向父组件传参

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

在子组件B中wxml:

<view style='border:2px solid gray;'>
    <view style='text-align:center;'>我是组件B</view>
    <view>A中传入的参数：{{paramAtoB}}</view>
    <button bindtap='change'>向A中传入参数</button>
</view>

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:

<view style='padding:20px;border:2px solid red;'>
    <view style='text-align:center;'>我是组件A</view>
    <view>
        <view>A组件内容：</view>
        <view>B组件传入参数：{{paramBtoA}}</view><!--myevent就是绑定的触发事件-->
        <componentB paramAtoB='我是A向B中传入的参数' bind:myevent="onMyEvent"/>
    </view>
</view>

在父组件A中js:

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

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

另外介绍：

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

<input type='number' bindinput="bindCode" style='width:200rpx;height:98rpx' value='{{codes}}'></input>

我们在子组件中的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
    })
  },

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

父组件向子组件传参

子组件向父组件传参

猜你喜欢