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

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

浏览量:3990 时间: 来源:wangY0316

创建组件

鼠标右键选择新建component

注意js和json文件,详细介绍请看文档(https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html)。

如果在子组件中使用全局样式(app.wxss),那么需要在子组件的wxss中引入app.wxss:

@import "./../../app.wxss"

引入组件

然后在父组件中引入子组件,在父组件的json中引入:

所有需要引入当前页面的子组件都存放在usignComponents中,childEle是子组件名,后面是子组件的路径。

然后就可以在当前页面中使用子组件。

引入之后的子组件就相当于一个标签。这样就简单的引入子组件到当前父组件页面,当前页面就会展示子组件的内容。

父组件传递参数到子组件

这里有两个变量,childParams是接收父组件传递的值,params是父组件传递给子组件的值,在父组件中设置的params值为:

然后在子组件中接收这个值。

首先在子组件中声明参数:

后面的String代表参数类型。

这样就可以在子组件中展示父组件传递过来的值。如果子组件的方法需要用到传递过来的参数,获取方法和其他页面一样使用this.data.params

子组件调用父组件方法

首先在元素上添加方法名:

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

在父组件中:

在子组件中:

我们添加了一个点击事件,当用户触发点击事件backFun的时候,会执行子组件调用父组件。

点击后,在父组件中就会有打印数据:

这里的detail就是我们传递过来的参数,也就是子组件方法中传递的res。

父组件方法调用子组件方法

给组件绑定一个id,然后在父组件js中声明

然后调用的时候,给父组件的元素中添加一个点击事件:

这里的foo就是子组件中定义的方法。

当点击父组件中的元素时候,执行的就是子组件中的方法。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎