小程序自定义组件

0 自定义组件特点

在微信小程序实际开发过程中，经常会有代码复用的情况，即在不同的页面中会经常使用结构类似的代码，这会造成代码的高耦合，还不利于代码的维护，微信小程序为了解决这一情况，支持了更为简洁的组件化编程，称之为自定义组件。

1 创建自定义组件

• 在项目根目录中，鼠标右键创建 components 文件夹
• 右击components文件夹,创建item文件夹
• 右击item文件夹，点击新建Component，输入item
• 回车，自动生成四个小程序文件js json wxml wxss

2 自定义组件的使用

2.1 局部引用

在需要使用组件的页面的.json文件中 ，首先对组件进行引用。

{
   
  "usingComponents": {
   
    "cell":"/components/cell/cell"
  }
}
//可同时引入多个组件，中间用逗号隔开

2.2 全局引用

在app.json中进行配置

{
   
  "usingComponents": {
   
    "cell":"/components/cell/cell"
  }
}
//可同时引入多个组件，中间用逗号隔开

3 组件的使用

3.1 自定义组件的样式

3.1.1 样式的隔离styleIsolation

（1）当值为isolated，则为开启样式隔离
（2）若为apply-shared，父影响子，即页面的样式可以影响到组件，但是组件不能影响组件外的样式。
（3）若为shared父子影响，为双向影响。

3.1.2 外部类externalClasses:[“cell-class”],

3.1.3 插槽

组件内插槽一般分默认插槽与命名插槽，经常使用的为命名插槽，方便布局。命名插槽在组件内定义时 属性name=“插槽名”，在页面使用时属性slot=“插槽名”。

3.2 组件传参

• 父传子
  
• 子传父
  

4 案例item组件

4.1 定义组件

4.2 编写wxml

<!--components/item/item.wxml-->
<navigator class="item itemclass" url="{
   {url}}" open-type="{
   {openType}}" bindtap="itemclick">
  <view class="icon" wx:if="{
   {icon}}">
    <image src="{
   {icon}}" mode="aspectFill"/>
  </view>
  <view class="content">
    <view