微信小程序父子组件方法调用方法汇总

最新推荐文章于 2025-01-27 23:44:35 发布

代码搬运媛

最新推荐文章于 2025-01-27 23:44:35 发布

阅读量6.6k

点赞数

分类专栏：微信小程序专栏文章标签：微信小程序 javascript 前端

本文链接：https://blog.csdn.net/sinat_33255495/article/details/121113589

版权

30 篇文章

订阅专栏

本文详细介绍了在前端开发中，如何实现父组件向子组件传值、子组件调用父组件方法以及父组件触发子组件的方法等内容。通过具体的代码示例展示了属性传值、事件绑定等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件通过属性传值

<childEle childParams="{{params}}"></childEle>

子组件通过properties接收：

properties: {
	childParams: { type: String }
}

父组件定义方法，childFun是子组件中的方法名，fun是父组件中的方法名。我们通过chidlFun来调用fun。

<childEle childParams="{{params}}" bind:childFun="fun"></childEle>

父组件方法：

childFun(e){
	console.log('我是父组件的方法', e)
}

当点击子组件的按钮执行 clickFun 时调用父组件的方法

clickFun(){
	this.triggerEvent('childFun');//如果需要传递参数，直接写在triggerEvent的参数里即可
}

<childEle id="childEle" childParams="{{params}}" bind:childFun="fun"></childEle>

父组件的 onReady 生命周期中获取 childEle 元素

onReady(){
	this.childEle = this.selectComponent('#childEle');
}

父组件的点击事件 childF 调用子组件的事件：

<view bindtap="childF">我是父组件的点击事件</view>

父组件触发子组件的方法：

childF(){
	this.childEle.foo()
}

这里的 foo即为子组件的方法。