摘要：不然每個用到這個組件的還得傳一遍重復(fù)的回調(diào)函數(shù)實際上函數(shù)功能是一樣的。如果要顯示隱藏的內(nèi)容包含很多標(biāo)簽，且不希望額外增加一個空標(biāo)簽當(dāng)然，該組件還有很多不足，比如回調(diào)函數(shù)還是不能個性化傳遞等等。

寫一個簡單的列表組件，每一列包含標(biāo)題、其他信息、按鈕點(diǎn)擊事件、該項隱藏與否等配置信息。

第一次寫的時候?qū)懥藗€map結(jié)構(gòu)的。emmmm...

寫這樣的數(shù)據(jù)結(jié)構(gòu)，因為初始組件設(shè)計思考不足。
目標(biāo)是展示的所有文案信息都是直接在默認(rèn)配置的基礎(chǔ)上混合就可以，按鈕的callback函數(shù)由于不了解業(yè)務(wù)的情況，誤以為各個引入此公共組件的模塊都不一樣。所以每個都多帶帶加了回調(diào)配置項。好處可能是靈活一點(diǎn)，但是后來看來，對這個需求不是特別契合。

const defaultList = {
  item1: {
    title : "發(fā)布",
    btnDisabled: false,
    btnCallback: null,
    showItem:true,
  },
  item2: {
    title : "收藏",
    btnDisabled: false,
    btnCallback: null,
    showItem:true,
  },
  ...
}

實際上，發(fā)現(xiàn)每個按鈕回調(diào)完成的功能大同小異。似乎可以先去掉回調(diào)函數(shù)傳參。不然每個用到這個組件的還得傳一遍重復(fù)的回調(diào)函數(shù)（實際上函數(shù)功能是一樣的）。所以，列表list，組件ul li基本可以放在一個頁面里。這個組件應(yīng)該寫得更重一點(diǎn)。因此結(jié)構(gòu)替換成數(shù)組。用type屬性來充當(dāng)遍歷時候的辨別節(jié)點(diǎn)判斷依據(jù)，而非上面的對象key值那么麻煩。前面用showItem屬性:true/false來控制項的隱藏與否也可以去除，換一種方式做篩選：

const defaultList = [
  {
    title : "發(fā)布",
    btnDisabled: false,
    btnCallback: null,
    showItem:true, //這個不需要了
    type: "1"
  },
  {
    title : "收藏",
    btnDisabled: false,
    btnCallback: null,
    showItem:true,
    type: "2"
  },
  ...
]

一開始考慮的是每個回調(diào)函數(shù)都不一樣，那組件里只寫li，在父組件做遍歷，把每項的Item傳進(jìn)來。這樣的話，實際組件的功能還是比較簡單的。定制化需求都放在父組件，父組件需要配置的地方比較多。

使用的時候比較麻煩：

  


import defaultList from "config/defautList"

data  () {
  // 個性化配置
  list:{
    item1: {
      title : "發(fā)布",
      btnDisabled: false,
      btnCallback: this.item1Callback,
      showItem:true,
    },
    item2: {
      title : "收藏",
      btnDisabled: true,
      btnCallback: item2Callback,
      showItem:true,
    }
  }
},
created () {
  // 混合配置
  this.list = $.extend(defaultList, this.list)
}
methods: {
  item1Callback () {
  },
  item2Callback () {
  }
}

老實說，也沒有那么多需要定制的東西，改進(jìn)后把所有的東西都基本放在了組件內(nèi)部，使用的時候只需要引入組件基本就行了。
并且利用數(shù)組的filter,incluedes,sort,indexOf實現(xiàn)數(shù)據(jù)的篩選與排序：

現(xiàn)在使用就很簡單了，直接引入組件，并且可通過傳一個帶標(biāo)題的數(shù)組，自定義順序和需要被展示的項：