【微信小程序】父子组件通信

最新推荐文章于 2023-09-02 07:45:00 发布

zwj、

最新推荐文章于 2023-09-02 07:45:00 发布

阅读量137

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/Twisted_/article/details/120501854

版权

本文详细介绍了在小程序开发中，如何进行父组件向子组件的属性绑定，以及子组件如何通过事件将数据传递回父组件。通过实例展示了数据传递的过程，并解释了如何使用`this.triggerEvent`和`bind`事件来实现通信。同时，还讨论了如何获取子组件的实例对象以直接访问其数据和方法。

摘要由CSDN通过智能技术生成

属性绑定

父向子传值只能传递put数据的数据无法将方法传递给子组件

// 父元素
// xxx.wxml
<view>
	// 使用子组件 并绑定值 传递给子组件 
    <test data="{{count}}"></test>
    <text>=====================</text>
    <view>父组件定义的count的值是{{count}}</view>
</view>
// ==============================
// xxx.js
Page({
  	data: {
        count:100
    },
})
// ==============================
// xxx.json
{
  "usingComponents": {
  	// 注册子组件
    "test":"/components/test/test"
  }
}
// ========================================================
// 子组件
// xxx.wxml
<view>
  <text>父组件传递的数据{{data}}</text>
</view>
// ==============================
// xxx.js
Component({
	properties:{
		// 在子组件内接受父元素传递的数据
		data:Number
	}
})

事件绑定

子向父传值可以传递任何类型的数据
父元素定义一个函数
将定义的函数传递给子组件
- bind:自定义事件名称 = 函数
- bind自定义事件名称 = 函数
子组件调用 this.triggerEvent('自定义事件名称',{传递的数据}) 方法将数据发送到父组件
父组件使用e.detail获取子组件传递的数据

1.0 给父元素的xxx.wxml 调用子组件的时候 绑定一个事件函数
 	<test data="{{count}}" bind:add="addCount"></test>
2.0 在父元素的xxx.js文件里面实现事件函数 
	Page({
		data: {
        	count:100
	    },
	    addCount(e){
	    	// 使用e.detail接收子组件传递的参数
	        console.log(e.detail);
	        this.setData({
	            count:e.detail.value
	        })
	    },
	})
3.0 子组件调用方法的时候 触发事件
<button bindtap="adds">+1</button>
	
Component({
	 // 接收父元素传递的数据
	 properties: {
        data:Number
    },
	 adds(){
     	this.setData({
     		data:this.properties.data+1
     	})
     	// 触发自定义事件 并传递数据给父元素
     	this.triggerEvent('add',{value:this.properties.data})
     }
})

获取子组件的实例对象

父元素里面调用 this.selectComponent('id或者class选择器') 获取子组件的实例对象
从而直接访问子组件的任意数据和方法

<view>
	<test data="{{count}}" bind:add="addCount" class="component" id="component"></test>
	<button bindtap="getComponent">获取子组件实例</button>
</view>

Page({
	getComponent(){
        console.log(this.selectComponent('.component'));
        const child = this.selectComponent('.component')
        child.setData({
            data:child.properties.data+1
        })
    },
})