类似于页面, 自定义组件拥有自己的 wxml 模版和 wxss 样式.
官方链接 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
组件化, 反过来理解, 写重复的页面, 方法, 写第二遍就烦了, 抽取出来就是组件化, 可以理解为公用的方法
对于通用的数据, 最先想到或者理应接触的是 template, 但是 template 有个缺点, 那就是只是页面效果, 不会有对应的 js 操作.
微信小程序组件化, 为什么要有自定义组件呢每个页面有对应的 js(JavaScript),json(配置 config),wxml(html),wxss(CSS) 还差什么不挺好的嘛, 为什么需要自定义组件呢当然, 对于特定的某个页面而言, 是足够了, 但是如果是通用的一些页面都需要相同的效果, 或者是相似的效果呢, 你还是一步步重复的操作嘛存在就是合理的, 完全可以把自定义组件理解为是一个自定义的标签, 页面的一个片段.
当然这只是最基本的想想, 既然是组件 component, 那对于 pages 页面而言, 就是一对多的关系. 多个页面织入组件, 怎么衔接起来呢. pages 页面可以给 component 组件传递值, 自然组件也会对应的想 pages 自定义的回调方法. 只要是你能想到, 想实现的, 都会有对应的提供.
实现方式, 在目录新建 component, 会自动生成对应的 js,json,wxml,wxss, 基本跟 pages 差不多
看看 component 各个文件内容吧
- Component({
- options: {
- multipleSlots: true // 在组件定义时的选项中启用多 slot 支持
- },
- /**
- * 组件的属性列表
- */
- properties: {
- },
- /**
- * 组件的初始数据
- */
- data: {
- },
- /**
- * 组件的方法列表
- */
- methods: {
- }
- })
options,multipleslots:true 在组建中启用多个 slot 支持.
properties, 里面可以定义一些接收 pages 页面的属性.
data, 组件的数据
method, 组件抽取出来的方法
具体用法
首先需要在 pages 页的 json 配置一下开启使用组件
说说 options 吧
你可以在 component 的 wxml 中
通过 slot 的 name 属性来指定对应的 pages 页面内容
ok
说说 properties 吧
在自定义标签中传递一个 num 属性
在组件中可以通过 properties 来传递
获取 num 值可以通过 this.properties.num 来获取
data 用法的话跟 page 是一个样子的.
最重要的要属于方法事件了
page 相对于组件而言, 是一个一对多的过程
既然是抽取出来的, 组件只能做一些共有的事, 私自的一些实现肯定是得通过 page 自省的.
这就涉及到了回调. 比如在组件中添加一个 bindtap 方法.
但是这个组件页面的 customevent 的方法是绑定的.
对应的 pages 页
在 methods 中, 通过 treggerEvent 来调用 page 自己实现的方法.
ok, 这是组件化入门
来源: https://www.cnblogs.com/c-h-y/p/9552797.html