微信小程序父子间组件传参

待我称王封你为后i 2023-06-26 10:42 4阅读 0赞

在小程序的实际开发中，经常会遇到父子间组件的传参问题，父组件里边的内容需要传给组件，以用来渲染页面。所以接下来就围绕父子之间如何传参，给大家演示一下实例。  
首先创建组件father和组件son，定义father组件为父组件，son组件为子组件。

##### 父组件向子组件传参 #####

<view>我是组件A</view>
    <view>
    		<componentB paramAtoB="{
       {arr}}"></componentB>
    </view>
    //arr是在组件father中data的数据，将它传给子组件son，paramAtoB是在子组件中定义传过来的数据的类型

在father.json中引入组件

{
      "usingComponents": {
    		"componentB":"../son/son"
    	}
    }

father.js

data: {
    		arr:[1,2,3,4,5,6]
    	},

son.wxml

<view>我是组件B</view>
    <view>以下是父组件A传给我的</view>
    <view style="color:#0fa">{
       {paramAtoB}}</view>

son.js

properties: {
    		paramAtoB: Array
    	},
    	//子组件即在**properties**中定义father组件要传过来的参数类型

传参成功的效果  
![在这里插入图片描述][20191231142345757.png]

#### 子组件向父组件传参 ####

注意:这里我是让子组件给当前调用它的页面传参，和父子组件之间传参稍微有所不同。  
要让子组件给父组件传参，需要在父组件引入子组件的时候，加个触发事件  
father.wxml  
监听的函数myevent就是在子组件中定义的点击触发函数（change）里边的自定义事件。  
onMyevent函数就是被子组件触发的时候的函数，获取子组件传来的值

<view>我是组件A</view>
    <view>来自son的参数</view>
    	<view style="color:red">{
       {paramBtoA}}</view>
    <view>
    		<componentB paramAtoB="{
       {arr}}" bind:myevent="onMyevent"></componentB>
    </view>

father.js

onMyevent: function(e) {
    			this.setData({
    				paramBtoA: e.detail.paramBtoA
    			})
    		},

son.wxml  
绑定一个点击事件，触发之后就可以将参数带入父组件

<view>我是组件B</view>
    <view>以下是父组件A传给我的</view>
    <view style="color:#0fa">	{
       {paramAtoB}}</view>
    <button bindtap="change">向father传入参数</button>

son.js

methods: {
    		change: function() {
    			this.triggerEvent('myevent',{paramBtoA:1798})
    		}
    	}

成功效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5eDE5OTcxMDI2_size_16_color_FFFFFF_t_70]  
最后总结一下，当父组件给子组件传参的时候，用的其实就是**properties**，在子组件中定义父组件传过来的值类型。  
当子组件给父组件传参的时候，需要一个触发事件，在子组件中定义一个点击事件，当点击事件触发的时候，产生一个自定义事件，用triggerEvent方法定义，并且携带参数，在父组件中监听这个自定义参数，获取其中的数据，从而实现子组件向父组件传值

[20191231142345757.png]: https://img-blog.csdnimg.cn/20191231142345757.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5eDE5OTcxMDI2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191231153948672.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5eDE5OTcxMDI2,size_16,color_FFFFFF,t_70