小程序-基础加强-自定义组件

前言

这次讲自定义组件

1. 准备今天要用到的项目

2. 初步创建并使用自定义组件







这样就成功在home中引入了test组件

在json中引用了这个组件才能用这个组件

现在我们来实现全局引用组件

在app.json这样使用就可以了





3. 自定义组件的样式






发现页面里面的文本和组件里面的文本都变小了

这样会造成样式的冲突,所以我们都不建议使用标签选择器,尽量使用class类名选择器










这样就都加粗了

4.自定义组件的data和methods








5. 自定义组件中的properties



这个max表示加1最大为max










6. 自定义组件的数据监听器




创建一个新的组件,然后在app.json中进行全局引用






7.自定义组件的数据监听器案例




















8. 自定义组件中的纯数据字段


比如rgb就是纯数据字段

然后就是把所有的rgb都改为_rgb

先选中一个rgb,然后ctrl+d,长按,就可以选中全部的rgb了

9. 自定义组件的生命周期函数


旧的方式就是与data那些平级定义,新的就是定义一个lifetimes


新旧两种方式同时存在,以新的为主

10. 组件所在页面的生命周期函数






11. 自定义组件的插槽







这是通过插槽填充的内容这个东西就会填充到slot的位置





因为这个view没有指定填写哪个插槽,所以没有显示



12. 组件通信-使用属性绑定实现父向子共享数据



home首页当做一个父组件

然后就是在子组件中声明这个count

这样就成功在资源内部接受了外部值了

这样就可以在子组件中使用了

下面我们来实现自增加一



但是这个加一不同步呢

现在我们要实现的是子组件向父组件传值---》事件绑定

13. 组件通信-使用自定义事件实现子向父共享数据







触发自定义事件,就是触发sync,也就是触发syncCount的意思





14. 组件通信-使用selectComponent获取组件实例



我们现在试着调用子组件里面的setData方法




id选择器也是可以的

15. 自定义组件的behaviors



我们在my-test5中使用behavior

这样就可以使用我们导入的behavior了





所以ls的优先级高于zs的

总结

下一节讲使用npm包

相关推荐
这是个栗子1 天前
uni-app 微信小程序开发:常用函数总结(一)
微信小程序·小程序·uni-app·getcurrentpages
爱勇宝2 天前
上线 20 多天后,我才发现小程序的图片上传一直不可用
微信小程序·智能小程序
万亿少女的梦1683 天前
基于微信小程序、Spring Boot与Vue3的智慧养老管理系统设计与实现
spring boot·redis·微信小程序·mybatis·vue3
alxraves4 天前
零代码AI助手:用大模型自动生成微信小程序界面与逻辑
人工智能·微信小程序·notepad++
秃头披风侠_郑4 天前
【uniapp】一文让你学会微信小程序+APP+H5全平台实战指南
前端·微信小程序·uni-app
爱勇宝5 天前
一个家庭成长小程序的 MVP 复盘:看到用户在用我很欣慰
微信小程序·产品·设计
这是个栗子6 天前
uni-app微信小程序开发:高频核心 API(三)
微信小程序·小程序·uni-app
quweiie6 天前
thinkphp8结合jwt与微信小程序接口鉴权
微信小程序·小程序·thinkphp接口·接口鉴权
didiplus8 天前
我在GitHub刷到一个诗词API,顺手写了款小程序
微信小程序
小码哥0688 天前
医院陪诊小程序怎么开发-医院陪诊小程序源码功能-微信小程序 医院健康陪诊陪护系统
微信小程序·小程序·医院陪诊·陪诊系统·陪诊陪诊