1揣钦、組件聲明

頁面json文件--usingComponents屬性

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

2、父子組件傳值

• 父向子傳值涨岁，類似vue,父組件引用時標簽添加屬性,隊形子組件中properties（同vue的props）
  -子向父傳值拐袜，在子組件中使用this.triggerEvent('myEvent'，參數(shù))梢薪，父組件中標簽中監(jiān)聽自定義事件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:'原創(chuàng)',
        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

• 自定義組件使用時，名稱大小寫敏感
• 與頁面不同自定義組件中的事件回調(diào)函數(shù)存放在methods中
• 不能直接修改this.data中變量的值
• 組件中observers相當于vue的watch秉撇，只存在于組件中
• created,組件剛剛被創(chuàng)建時觸發(fā)甜攀，不可使用setData，常用于給組件this添加自定義屬性字段
• attached,組件初始化完畢后觸發(fā)琐馆，絕大多數(shù)初始化工作此處進行
• detached,組件銷毀時觸發(fā)