#微信小程序# 使用Component来创建自定义组件

微信小程序学习笔记 使用Component来创建自定义组件

微信小程序中通过Component(Object object)来创建自定义组件，官方文档如下Component | 微信开放文档
​

前言：为什么要使用自定义组件

当我们开发一个大型应用时，模块的复用可以大大提高代码编写的效率，降低代码的复杂度和后期维护的难度，在微信小程序中，往往不同页面中会用到相似的页面布局模块，为此可以使用Component(Object object)来创建自定义组件，下面让我们一起来看一下。

第一步：使用Component创建组件

首先在根目录下创建一个components文件夹，用来存放我们将要创建的所有自定义组件
​

​
然后在components文件夹下，创建我们要自定义的组件的文件夹（自定义组件与页面类似，也由json、wxml、wxss、js 四个文件组成）
​

​
到这里我们的自定义组件就算初步创建完成了。

第二步：声明所要使用组件

当我们在自己的业务页面中需要使用自定义组件时，需要先声明所要使用的自定义组件。例如我们要在index页面中使用刚刚创建的自定义组件myHeader，则先到index.json文件中修改如下：

{
  "usingComponents": {
    "myHeader" : "../../components/myHeader/myHeader"
  }
}

注："myHeader"即为所要使用的自定义组件的名称，组件地址在这里使用相对路径。
​
​

第三步：在页面中使用自定义组件

经过创建和声明之后，我们就可以在我们自己的业务页面来使用我们所创建的自定义组件了。
还是刚刚的例子，这时我们可以在index.wxml文件中来像使用view标签一样来使用myHeader标签了，这就是自定义组件的魅力所在咯。

<!--pages/index/index.wxml-->
<view>pages/index/index.wxml</view>
<myHeader> </myHeader>
​

效果如下：
​

​

如有不足还请多多指教。