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

创建组件

鼠标右键选择新建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就是子组件中定义的方法。

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