微信小程序自定义组件的使用

336 阅读1分钟

商城项目 - 微信开发者工具 RC v1.05.2107221 2021-09-23 13-48-45.gif

一.基本操作

1. 创建默认组件

通过小程序开发工具进行创建,帮助快速构造默认文件

2. 在要用到组件得地方(父组件)中的xxx.json文件中引入组件路径

图片.png

我们能在页面中看到子组件的内容证明引入成功

图片.png

二.数据传输

1.父组件向子组件传递数据在夫组件的js文件中加入数据数组tabs[]

图片.png

2.在父组件加入传递参数的关键字

图片.png 3.子组件在js文件的properties接收参数

图片.png

4.父组件在子组件的标签定一个点击事件

图片.png 事件获取是当前tabs[]数组的下标并对是否选中做出判断。

图片.png 5.子组件定义好要输出的部分,通过wx:for对父组件传过来的data中tabs数组的数据进行循环输出,并通过绑定切换事件bindtap来实现子组件切换父组件监听并返回index值的功能。(要插入内容需要在子组件内设置好slot标签)

图片.png 6.父组件根据返回的tabs[]下标判断是哪个模块被点击

图片.png