微信小程序父子组件方法调用-微信小程序引用组件-微信小程序组件开发-即速应用

微信小程序父子组件方法调用-微信小程序引用组件-微信小程序组件开发

浏览量：1958 时间：2020-04-06 来源：wangY0316

1.
创建组件
2.
鼠标右键选择新建component
3.
注意js和json文件，详细介绍请看文档（https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html）。
4.
如果在子组件中使用全局样式（app.wxss），那么需要在子组件的wxss中引入app.wxss：
5.
@import"./../../app.wxss"
6.
引入组件
7.
然后在父组件中引入子组件，在父组件的json中引入：
8.
所有需要引入当前页面的子组件都存放在usignComponents中，childEle是子组件名，后面是子组件的路径。
9.
然后就可以在当前页面中使用子组件。
10.
引入之后的子组件就相当于一个标签。这样就简单的引入子组件到当前父组件页面，当前页面就会展示子组件的内容。
11.
父组件传递参数到子组件
12.
这里有两个变量，childParams是接收父组件传递的值，params是父组件传递给子组件的值，在父组件中设置的params值为：
13.
然后在子组件中接收这个值。
14.
首先在子组件中声明参数：
15.
后面的String代表参数类型。
16.
这样就可以在子组件中展示父组件传递过来的值。如果子组件的方法需要用到传递过来的参数，获取方法和其他页面一样使用this.data.params
17.
子组件调用父组件方法
18.
首先在元素上添加方法名：
19.
childFun是子组件中的方法名，fun是父组件中的方法名。我们通过chidlFun来调用fun。
20.
在父组件中：
21.
在子组件中：
22.
我们添加了一个点击事件，当用户触发点击事件backFun的时候，会执行子组件调用父组件。
23.
点击后，在父组件中就会有打印数据：
24.
这里的detail就是我们传递过来的参数，也就是子组件方法中传递的res。
25.
父组件方法调用子组件方法
26.
给组件绑定一个id，然后在父组件js中声明
27.
然后调用的时候，给父组件的元素中添加一个点击事件：
28.
这里的foo就是子组件中定义的方法。
29.
当点击父组件中的元素时候，执行的就是子组件中的方法。