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

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

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

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

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

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

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

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

使用的時(shí)候比較麻煩：

  


import defaultList from "config/defautList"

data  () {
  // 個(gè)性化配置
  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 () {
  }
}

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

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