微信小程序（六）--- 组件化

一、自定义组件

1、创建自定义组件

1、新建一个文件夹 Components

2、可以使用小程序编辑器，右键，新建Components

3、生成js、json、wxml、wxss四个文件

2、声明在哪里使用

1、打开用使用组件的文件，打开json文件

2、在usingComponents使用键值对形式配对

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

3、使用组件

1、打开用使用组件的文件，打开wxml文件

2、使用

<Tabs></Tabs>

二、组件数据传递

1、父组件向子组件传递数据

1.1、父传子 通过标签属性

<Tabs aaa="123"></Tabs>

1.2、子组件接收数据

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    aaa: {
      type: String,
      value: ''
    }
  },
  data() {}
})

1.3、子组件使用该数据

使用data里面的数据一样

<view>{{aaa}}</view>

2、子组件向父组件传递数据

2.1、子传父 通过事件 的方式

// 触发父组件中的自定义事件，同时传递数据给
this.triggerEvent('itemChange', {index}) 

2.2、父组件接收数据

<Tabs tabs="{{tabs}}" binditemChange="handleItemChange"></Tabs>

2.3、父组件使用数据

handleItemChange(e) {
   const { index } = e.detail;
}

三、slot 插槽

等父组件调用 子组件 在传递标签过来，这些传递的标签就会替换 slot 插槽的位置

3.1、组件内插槽

<view class="tabs_content">
     <slot></slot>
</view>

3.2、使用组件页面

<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
  <block wx:if="{{tabs[0].isActive}}">1 </block>
  <block wx:else> 4</block>
</Tabs>

四、组件的生命周期

生命周期	参数	描述
created	无	在组件实例刚刚被创建时执行
attached	无	在组件实例进入页面节点树时执行
ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
detached	无	在组件实例被从页面节点树移除时执行
error	Object Error	每当组件方法抛出错误时执行