自定义组件
文档地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
开发者可以将页面内的功能模块抽象成自定义组件(思想与vue和react一样),以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。
步骤:
- 创建组件(页面)A,其实现的操作是可以被复用的,例如前面的scrollView页面
- 声明上一步创建好的页面为一个组件(在其json文件中声明)
- 此时就可以将组件A在其他组件中导入进行使用
例如前面的scrollView页面,将其当作一个组·件,在自定义页面组件customComponent中去使用:
- 创建组件(页面)A,其实现的操作是可以被复用的,例如前面的scrollView页面
- 该步骤前面已经实现,跳过
声明上一步创建好的页面为一个组件(在其json文件中声明)
- 只需要在json文件中增加
component
,将其值设置为true
即可
{ "usingComponents": {}, "component": true }
此时就可以将组件A在其他组件中导入进行使用
- 在需要使用组件A的组件中的json文件里导入scrollView组件,需要在json中的
usingComponents
配置项里声明需要使用的自定义组件的内容(导入,充当之前的框架中的import写法)
{ "usingComponents": { "scroll": "/pages/scrollView/scrollView" } }
随后就可以在当前页面中使用scroll
组件
<!--pages/customComponent/customComponent.wxml--> <text>pages/customComponent/customComponent.wxml</text> <!-- 使用scroll组件,来复用scrollView页面 --> <!-- 使用组件的时候方法与vue及react一致,当作标签使用即可 --> <scroll></scroll>
提示:小程序也可以在使用自定义组件的时候给其复用的组件进行传值,传递方式通过属性传值,与template那里的形式一样,但是与template不一样的是,其属性的名不固定是data。接收的方式一样,不使用props。直接用即可。