小程序學習筆記(7) -- 自定義組件案例

步驟

創建⾃定義組件

新建個test文件加，點擊test文件夾右鍵創建components


自動生成test文件裏面的4個文件

聲明組件

已經幫我們自動填寫上了，看下

引入自定義組件

在demo16.json裏面引入test組件，key代表組件的別名

使用自定義組件

在demo16. wxml使用test組件

<!--pages/demo16/demo16.wxml-->

<test></test>

打開demo16的頁面看下效果:

已經顯示test組件內容

tabs案例瞭解自定組件的關鍵知識點

新建個tabs組件，demo17的頁面使用tabs組件
完整代碼如下:
tabs.wxml

<view clsss="tabs">
    <view class="tabs_title">
        <!-- <view class="title_item active">首頁</view>
        <view class="title_item">原創</view>   
        <view class="title_item">分類</view>   
        <view class="title_item">關於</view>  
        -->
       <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">
        <!-- slot 標籤其實就是一個佔位符
        等到 父組件調用 子組件的時候  再傳遞  標籤過來 最終 這些被傳遞的標籤
        就會替換slot插件的位置
         -->
        <slot></slot>
    </view>     
</view>

tab.js

// Tabs/tabs.js
Component({
  /**
   * 組件的屬性列表
   * 裏面存放的是 要從父組件接收的數據
   */
  properties: {
    //要接收的數據的名稱
    // aaa:{
    //   //type 要接收的類型
    //   type: String,
    //   value:""
    // }
    tabs:{
      type: Array,
      value: []
    }
  },

  /**
   * 組件的初始數據
   */
  data: {
   
  },
  

  /**
   * 組件的方法列表
   */
  methods: {
    handleItemTap: function(e){
      console.log(e)
      console.log(e.currentTarget.dataset.index)
      /**
       * 綁定事件，需要在methods中綁定
       * 獲取被點擊的索引
       * 獲取數組循環
       * 
       *    除了索引的閒的屬性爲isActivew爲true外，其他的均爲false
       *  
       * 5.點擊事件觸發的時候
       *    觸發父組件中的自定義事件  同時傳遞數據給  父組件
       *    this.triggerEvent("父組件自定義事件的名稱", 要傳遞的參數)
       */
      //獲取索引
      const {index} = e.currentTarget.dataset;
      //觸發父組件中的自定義事件  同時傳遞數據給  父組件
      this.triggerEvent("itemChange", {index})
      //獲取data中的數組
      //解構 對 複雜類型進行解構的時候，複製了一份 變量的引用而已
      //最嚴謹的做法，重新拷貝一份 數組， 再對這個數組的備份進行處理
      //let tabs = JSON.parse(JSON.stringify(this.data.tabs))
      //不要直接修改 this.data.數據
      let {tabs} = this.data;
      //等於 let tabs = this.data
      //[].forEach 遍歷數組，遍歷數組的時候， 修改了v，也會導致原數組被修改
      // tabs.forEach((v, i) => i==index ? v.isActive=true : v.isActive = false);
      // this.setData({
      //   tabs
      // })     
    }
  }
})

tabs.json

{
  "component": true,
  "usingComponents": {}
}

tabs.wxss

.tabs_title{
    display: flex;
    padding: 10px;
}
.title_item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.active{
    color: red;
    border-bottom: 10rpx solid currentColor;
}

使用組件的頁面 demo17
demo17.wxml

<!--pages/demo17/demo17.wxml-->
<!-- <text>pages/demo17/demo17.wxml</text> -->

<!-- 
    1.父組件(頁面)向子組件 傳遞數據 通過 標籤屬性的方式來傳遞 
       1 在子組件上進行接收
       2 把這個數據當成是data中的數據直接用即可
    2 子向父傳遞數據 通過事件的方式傳遞
      1.在子組件的標籤上加一個 自定義事件
-->

<tabs tabs="{{tabs}}" binditemChange="handleItemChange">
<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:else>3</block>
</tabs>

demo17.js

// pages/demo17/demo17.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    tabs:[
      {
        id:0,
        name:"首頁",
        isActive: false
      },
      {
        id:1,
        name:"原創",
        isActive: true
      },
      {
        id:2,
        name:"分類",
        isActive: false
      },
      {
        id:3,
        name:"關於",
        isActive: false
      }
    ]
  },
  //自定義事件， 用來接收子組件傳遞的數據
  handleItemChange: function(e){
    console.log(e);
    console.log(e.detail.index);
    let {tabs} = this.data;
    //等於 let tabs = this.data
    //[].forEach 遍歷數組，遍歷數組的時候， 修改了v，也會導致原數組被修改
    tabs.forEach((v, i) => i==e.detail.index ? v.isActive=true : v.isActive = false);
    this.setData({
      tabs
    })     
  }
  
})

demo17.json

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

效果演示:
切換tab，點擊的tab高亮，並變化不同的內容

注意點:
父組件向子組件傳值
子組件向父組件傳值
slot的使用

自定義組件的其他屬性

注意observers 只有組件中可以使用，頁面是不可以使用這個事件的

筆記補充:
https://docs.qq.com/pdf/DTlVnYnFvdnZYUmNn

---

完