自定义组件的步骤

以tab切换组件为例

1. 创建自定义组件
   创建components/tab文件夹
   在tab上右键，新建Comoponent,就生成了组件相关的四个文件wxml,wxss,js,json
2. 完成组件定义
   tab.wxml

<view class="tab">tab</view>

3. 在页面的json中引入组件

{
  "usingComponents": {
    "y-tab": "/components/tab/tab"
  }
}

4. 在页面的wxml中使用组件

<y-tab></y-tab>

页面向组件传参

page.wxml向组件传值

<y-tab class-id="{{数据}}" >

tab.js 组件接收传值 父向子传值

properties: {
    classId: {
      type: Number,
      //  默认值
      value: 100
    }
  },

类似vue的props,在组件中使用时和data数据一样 this.data.classId
组件内 监听事件 同watch一样
observers:{
classId(){
this.getdata()
}
},

组件向页面传参 子向父传值

tab.js 向页面传参

    //send为自定义事件
    this.triggerEvent("send",新值)

page.wxml中监听事件

<y-tab  bindsend="getChildData"></y-tab>

page.js中接收传参

getChildData(e){
    //e.detail为组件向页面的传参
    console.log(e.detail)
}

类似vue中的this.$emit()传参过程

组件监听器

//当classId发生变化时执行，组件初始化时也会执行一次
  observers: {
    classId() {
      this.getData()
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    getData() {
      //模拟网络请求
      let list = tabList.filter(item => {
        return item.classId == this.data.classId
      })
      this.setData({
        list: list[0].contList
      })
    }
  }
})

类似vue中的watch

组件中的生命周期函数

lifetimes: {
    //组件初始化完毕，但此时还不能访问this.setData
    created() {},
    //当组件用wx:if移除时，会触发
    detached() {
      console.log('detached');
    },
    // 组件初始化完毕 ，可以访问this.setData
    attached() {

    }
},

组件中的单个插槽

tab.wxml中需要的位置定义插槽

<slot></slot>

page.wxml中使用

<y-tab>
    <view>嵌入插槽中的内容</view>
</y-tab>

组件中的多个插槽

tab.js中配置

options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
},

tab.wxml中定义插槽

<slot name="c1"></slot>
<slot name="c2"></slot>

page.wxml中使用

<y-tab>
    <view slot="c1">嵌入插槽中的内容</view>
    <view slot="c2">嵌入插槽中的内容</view>
</y-tab>