(一)簡(jiǎn)單使用組件的三個(gè)步驟

1.創(chuàng)建自定義組件

類似于頁(yè)面，一個(gè)自定義組件由json wxml wxss js4個(gè)文件組成

2.聲明自定義的組件

在所需要用到組件的頁(yè)面的json文件中進(jìn)行聲明

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

3.使用組件

在頁(yè)面中當(dāng)作普通標(biāo)簽使用即可

---

(二)組件的樣式優(yōu)化與標(biāo)題激活選中

//tabs.wxml
<view class="tabs">
    <view class="tabs_tittle">
        <view 
        wx:for="{{tabs}}"
        wx:key="id"
        class="title_item {{item.isActive?'active':''}}"
        >
            {{item.name}}
        </view>
    </view>
    <view class="tabs_content">內(nèi)容</view>
</view>

Component({
  /**
   * 組件的屬性列表
   */
  properties: {

  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    tabs:[
      {
        id:0,
        name:"首頁(yè)",
        isActive:true
      },
      {
        id:1,
        name:"原創(chuàng)",
        isActive:false
      },
      {
        id:2,
        name:"分類",
        isActive:false
      },
      {
        id:3,
        name:"關(guān)于",
        isActive:false
      },
    ]

  },

  /**
   * 組件的方法列表
   */
  methods: {

  }
})

標(biāo)題激活選中

<view class="tabs">
    <view class="tabs_tittle">
        <view 
        wx:for="{{tabs}}"
        wx:key="id"
        class="title_item {{item.isActive?'active':''}}"
        bindtap="handleItemTap"
        data-index="{{index}}"
        >
            {{item.name}}
        </view>
    </view>
    <view class="tabs_content">內(nèi)容</view>
</view>

 //tabs.js
  methods: {
    handleItemTap(e) {
      /*
      1、綁定點(diǎn)擊事件   在methods中綁定
      2、獲取被點(diǎn)擊的索引
      3、獲取原數(shù)組
      4、對(duì)數(shù)組循環(huán)
      */
      //獲取索引
      const { index } = e.currentTarget.dataset;
      //獲取data中的數(shù)組
      //等價(jià)于let tabs=this.data.tabs;
      let { tabs } = this.data;
      //循環(huán)數(shù)組
      tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);

      this.setData({
             tabs
      })
    }
  }

---

(三)父向子傳遞數(shù)據(jù)

父組件的wxml

<!-- 
   demo.wxml

    父組件頁(yè)面向子組件傳遞數(shù)據(jù)是通過(guò)標(biāo)簽屬性的方式
    1、在子組件進(jìn)行接收
    2、把這個(gè)數(shù)據(jù)當(dāng)成data中的數(shù)據(jù)直接使用
 -->
<Tabs aaa="123"></Tabs>

子組件的js

 //Tabs.js
 // 里面存放的是要從父組件接收的數(shù)據(jù)
  properties: {
    // 要接收的數(shù)據(jù)的名稱
    aaa:{
      // type  要接收的數(shù)據(jù)的類型
     type:String,
    //  value 默認(rèn)值
    value:""
    }
  },

子組件的wxml

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

---

(四)子向父?jìng)鬟f數(shù)據(jù)

觸發(fā)父組件中的自定義事件，同時(shí)傳遞數(shù)據(jù)給父組件

this.triggerEvent{"父組件自定義事件的名稱",要傳遞的參數(shù)}

---

(五)slot

slot標(biāo)簽其實(shí)就是一個(gè)占位符，插槽，當(dāng)父組件調(diào)用子組件的時(shí)候，再傳遞標(biāo)簽過(guò)來(lái)，最終這些被傳遞的標(biāo)簽會(huì)替代slot插槽的位置

<Tabs>
    <block wx:if="{{tabs[0].isActive}}">0</block>
    <block wx:elif="{{tabs[1].isActive}}">1</block>
    <block wx:elif="{{tabs[2].isActive}}">2</block>
    <block wx:elif="{{tabs[3].isActive}}">3</block>
</Tabs>

---

(六)組件的其它屬性

• properties:組件的對(duì)外屬性，是屬性名到屬性設(shè)置的映射表
• data:組件的內(nèi)部數(shù)據(jù)，和properties一同用于組件的模板渲染
• observers:組件數(shù)據(jù)字段監(jiān)聽(tīng)器，用于監(jiān)聽(tīng)properties和data的變化
• methods:組件的方法，包括事件響應(yīng)函數(shù)和任意的自定義方法
• created:組件生命周期函數(shù)，在組件實(shí)例剛剛被創(chuàng)建時(shí)執(zhí)行注意此時(shí)不能調(diào)用setData
• attached:組件生命周期函數(shù)，在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹時(shí)執(zhí)行
• ready:組件生命周期函數(shù)，在組件布局完成后執(zhí)行
• moved:組件生命周期函數(shù)，在組件實(shí)例被移動(dòng)到節(jié)點(diǎn)樹另一個(gè)位置時(shí)執(zhí)行
• detached:組件生命周期函數(shù)，在組件實(shí)例被從頁(yè)面節(jié)點(diǎn)樹移除時(shí)執(zhí)行