从零学习微信小程序(三): 自定义组件
小程序支持组件化编程,这一点有点像 React ,可以将页面内的功能模块抽象成自定义组件,就类似于基础组件轮播图等...,这样可以将一个复杂的页面拆分成多个低耦合的模块,有助于代码维护。
那么如何自定义一个组件呢,这节记录以下~
1. 创建自定义组件
一个组件也类似于一个页面,由json
wxml
wxss
js
4个文件组成
可以在一个新文件夹上右键新建component
,可以直接生成这四个文件
其次在json
配置文件中,需要将component
属性配置成true
,用上面的方法创建的默认设置好了
然后在组件的wxml
和wxss
文件中,配置组件模板,写法就和编写普通的功能模块一致
类似于这样,编写一个myHeader
的组件
可以在组件js
文件中编写属性和方法,但是必须要存在methods
中
2. 使用自定义组件
在使用自定义组件前,需要在使用组件的页面中使用json
文件中进行声明,并且需要配置组件的名称和文件路径
这样我们就配置好一个自定义组件了,我们可以在页面的wxml
文件中直接使用myHeader
标签来使用该组件
例如在第30行代码中使用了这个组件,页面效果呈现如下
可以看到myHeader
自定义组件已经成功渲染在页面上了
3. 激活组件事件
上面的方法只是用于固定的内容,不太常用,下面记录下通过数据来渲染组件
数据的传输定义在data
属性中,事件写在method
列表中
通过事件对象e
来获取点击的目标,改变点击对象的isActive
值从而改变类名active
4. 父向子传递数据
父指的是定义出来的标签,子指的是组件内部数据
- 父组件传递
<myHeader aaa = '123'></myHeader>
- 子组件接收
在组件的.js
文件中接收数据,配置接收数据的类型和默认值
Component({
properties: {
aaa: {
// 接收数据的类型
type: String,
// value 默认值
value: ""
}
}
})
- 子组件使用父组件传递来的数据
将接收过来的数据当作本身data
中的数据来使用
<view>{{ aaa }}</view>
5. 子向父传递数据
通过注册事件来传递数据,在子组件中注册事件,在子组件中触发父组件中的自定义事件同时传递数据给父组件
子组件js
文件
methods: {
hanldeItemTap(e) {
// 获取索引
const {index} = e.currentTarget.dataset;
// 触发父组件中的自定义事件同时传递给父组件
this.triggerEvent("itemChange", {
index
})
}
}
在父组件中添加自定义事件
<Tabs binditemChange="handleItemChange"></Tabs>
在父组件中接收子组件传递的数据
// 自定义事件 接收子组件传递的数据的
handleItemChange(e) {
// 接收传递过来的参数
const {index} = e.detail;
// 拿到原数组
let {tabs} = this.data;
tabs.forEach((v,i) => i===index?v.isActive=true:v.isActive=false);
// 修改data中的数据
this.setData({
tabs
})
}
在触发自定义组件的triggerEvent
事件就会触发父组件的handleItemChange
事件,实现数据传递
点击事件触发的时候,触发父组件中的自定义事件同时传递给父组件
this.triggerEvent("父组件自定义事件的名称",要传递的参数)
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfbbhc
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01