小程序自定义组件

1、组件声明

页面json文件--usingComponents属性

//页面json文件
{
  "usingComponents": {
    "Tabs":"../../components/tabs/tabs"
  }
}

2、父子组件传值

• 父向子传值，类似vue,父组件引用时标签添加属性,队形子组件中properties（同vue的props）
  -子向父传值，在子组件中使用this.triggerEvent('myEvent'，参数)，父组件中标签中监听自定义事件bindmyEvent= "handleMyEvent"，获取传参使用e.detail
• slot 占位

<!--父页面wxml-->
<Tabs tabs="{{tabs}}" bindtabChange="handleTabChange">
  <view wx:if="{{tabs[0].isActive}}">11111111111</view>
  <view wx:if="{{tabs[1].isActive}}">22222222222</view>
  <view wx:if="{{tabs[2].isActive}}">33333333333</view>
  <view wx:if="{{tabs[3].isActive}}">44444444444</view>
</Tabs>

// 父js
Page({
  data: {
    tabs:[
      {
        id:0,
        name:'首页',
        isActive:false
      },
      {
        id:0,
        name:'原创',
        isActive:true
      },
      {
        id:0,
        name:'分类',
        isActive:false
      },
      {
        id:0,
        name:'关于',
        isActive:false
      } ,
    ]
  },
  handleTabChange(e){
    const index = e.detail
    let {tabs} = this.data
    tabs.forEach((tab,i)=>i===index?tab.isActive=true:tab.isActive=false)
    this.setData({
      tabs
    })
    console.log(this.data.tabs)
  }
})

<!--子组件wxml-->
<view>
  <view class="title">
      <view class="tab_item {{tab.isActive?'active':''}}" 
          wx:for="{{tabs}}" 
          wx:key="id" 
          wx:for-index="index" 
          wx:for-item="tab"
          bindtap="tabSwitch"
          data-index="{{index}}">
          {{tab.name}}
      </view>
  </view>
  <view>
    <slot></slot>
  </view>
</view>

//子组件js
Component({
  properties: {
    tabs:{
      type:Array,
      value:[]
    }
  },
  methods: {
    tabSwitch(e){
      const {index} = e.target.dataset
      this.triggerEvent("tabChange",index)
    }
  }
})

tips

• 自定义组件使用时，名称大小写敏感
• 与页面不同自定义组件中的事件回调函数存放在methods中
• 不能直接修改this.data中变量的值
• 组件中observers相当于vue的watch，只存在于组件中
• created,组件刚刚被创建时触发，不可使用setData，常用于给组件this添加自定义属性字段
• attached,组件初始化完毕后触发，绝大多数初始化工作此处进行
• detached,组件销毁时触发