创建组件

1.在根目录下创建一个components文件夹

2.在components文件下创建需要的组件文件夹

3.右键新建component

4.在需要使用组件的页面，找到页面的.json文件，在usingComponents下注册组件，usingComponents中的key值组件的名字,value是代码的路径

5.在页面中姨注册的key为标签名，使用组件

组件的生命周期

组件的生命周期需要定义再lifetimes中，组件的方法需要放在methods中

组件的生命周期一共有3个：

created ：组件实例刚刚被创建好。此时还不能调用 setData
attached：组件完全初始化完毕、进入页面节点树后。绝大多数初始化工作可以在这个时机进行
detached：在组件离开页面节点树后

组件内数据变化监听

小程序监听需要通过 observers选项来进行监听数据变化

observers:{
    active:function(val){
      const {id} = this.data.listData[val]
      console.log(id)
    }
  }

组件之间传值

组件之间的关系分为父子组件和兄弟组件

父子之间传值

父向子传值

// 子组件：通过 properties 声明要从父组件中接收的数据
    /**
     * 组件的属性列表
     */
    properties: {
        tabId: String
    },

// 父组件：通过自定义属性的形式传递数据，以子组件中定义的 key 为属性名，以要传递的数据为属性值
   <list tabId="{{tabSelectId}}">

子向父传值

// 子组件：通过 triggerEvent 方法发送一个通知，通知父组件接收数据。
// 方法的第一个参数为：通知名
// 方法的第二个参数为：要传递的数据
this.triggerEvent('change', {
    id
})

// 父组件：通过 bind 监听子组件中发送的通知
// bind 后的内容为 子组件发送的通知名，表达式为接收到该通知时所触发的方法
<tabs bind:change="onTabChange"></tabs>
// 方法被触发后可以通过 e.detail 的形式获取子组件传递过来的数据对象
onTabChange (e) {
    const {id} = e.detail;
    this.setData({
        tabSelectId: id
    })
}

兄弟之间传值

兄弟之间传值需要一个中间人，这个中间人可以是父组件，假如A和B是兄弟组件要互相传值，A可以先传给父组件，父组件在传给B组件

组件插槽

小程序的插槽分为单一插槽和多个插槽

单一插槽

1，在组件中使用 slot 组件定义插槽

2.在组件使用时，以 innerHTML 的形式插入内容：

<component>
    <view>单一插槽插入的 DOM</view>
</component>

多个插槽

1.在组件中指定 options 选项的 multipleSlots 选项为 true

2.通过 slot 的 name 属性为插槽命名。例如：<slot name="header"></slot>

<component>
    <view slot="header">该元素将被插入到 name=header 的插槽中</view>
    <view slot="footer">该元素将被插入到 name=footer 的插槽中</view>
</component>

小程序组件