微信小程序-自定义组件

自定义组件

文档地址：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。直接用即可。