? ? ? ?在開(kāi)發(fā)的過(guò)程中谬哀，會(huì)發(fā)現(xiàn)有一些頁(yè)面整體有著極大的相似度。如果每次做一個(gè)這頁(yè)面严肪，都要重新寫(xiě)布局的話史煎，會(huì)特別的繁瑣，而且由于不是一個(gè)人開(kāi)發(fā)驳糯，在像素的控制以及布局習(xí)慣上篇梭，可能就會(huì)造成明明是相同的頁(yè)面，但是看起來(lái)卻各不相同酝枢，總是有一些細(xì)微的差別恬偷。而且，后期維護(hù)的時(shí)候帘睦，還會(huì)特別麻煩袍患。
所以，為了避免重復(fù)造輪子竣付，也為了能夠提高自己的工作效率诡延。秉持習(xí)大大要學(xué)會(huì)“想著懶”的思想，我決定將這個(gè)頁(yè)面封裝一下古胆。將基礎(chǔ)的布局和可能會(huì)用到的功能全部封裝里面肆良，并將接口拋出，以處理各個(gè)頁(yè)面可能會(huì)存在的各種處理邏輯逸绎。
說(shuō)做就做惹恃，首先我分析了一下這些頁(yè)面的相似點(diǎn)和不同點(diǎn)，以便處理公用布局和個(gè)別頁(yè)面會(huì)用到的布局棺牧。
相同點(diǎn)：
? ? ? ? ? ? 1.頭部：都有NavBar導(dǎo)航欄以及搜索框巫糙。
? ? ? ? ? ? 2.身體：都是一條條的單據(jù)。
? ? ? ? ? ? 3.腳：底部按鈕陨帆。
不同點(diǎn)：
? ? ? ? ? ? 1.導(dǎo)航欄title曲秉，搜索框關(guān)鍵字采蚀。
解決方案：父組件向子組件傳值控制疲牵。
? ? ? ? ? ? 2.是否需要操作按鈕承二、審核標(biāo)識(shí)。
解決方案：操作按鈕使用vant組件彈出層纲爸，因此需要用到父子組件數(shù)據(jù)雙向綁定控制彈出層亥鸠。
審核標(biāo)識(shí) 是根據(jù)后端數(shù)據(jù)判斷，需要給動(dòng)態(tài)key值识啦。
? ? ? ? ? ? 3.單據(jù)展示行數(shù)不同以及單據(jù)的展示內(nèi)容不同负蚊。
解決方案：通過(guò)具名slot插槽實(shí)現(xiàn)，將內(nèi)容放到父組件中颓哮。子組件中做好布局家妆，父組件只填充內(nèi)容。slot插槽除了占位還要傳遞參數(shù)冕茅，這里就用到了作用域插槽伤极，父組件slote-scope負(fù)責(zé)接收參數(shù)。
在之前的工作中姨伤，我們已經(jīng)將導(dǎo)航欄哨坪、搜索框封裝成了一個(gè)組件，底部的按鈕也封裝成了一個(gè)組件乍楚。那么当编，現(xiàn)在只需要考慮身體的部分，即單據(jù)列表的展示徒溪。
通過(guò)上面三個(gè)圖忿偷，可以知道公司的單條合同以及單據(jù)的布局是2行或者3行，且里面內(nèi)容不一致臊泌。其次鲤桥，個(gè)別頁(yè)面底部沒(méi)有Button，因此缺虐，內(nèi)容盒子的最大高度需要根據(jù)場(chǎng)景去動(dòng)態(tài)改變芜壁。
另外，管理單據(jù)按鈕以及審核標(biāo)識(shí)也是在不同場(chǎng)景下展示高氮，也需要?jiǎng)討B(tài)控制慧妄。
同時(shí)，需要考慮剪芍，客戶的單據(jù)量是非常龐大的塞淹，一次性加載肯定會(huì)非常耗時(shí)，需要加上分頁(yè)懶加載（分頁(yè)懶加載使用vant組件罪裹，加載控制變量需要雙向綁定）饱普。
但是vue?父子組件傳遞是單項(xiàng)數(shù)據(jù)流运挫。因此需要用到.sync實(shí)現(xiàn)父子組件數(shù)據(jù)雙向綁定。同時(shí)套耕，用了.sync后谁帕，子組件數(shù)據(jù)只能更新一次，需要監(jiān)聽(tīng)數(shù)據(jù)冯袍，并手動(dòng)賦值更新匈挖。
html代碼：
props：
methods：
watch：
本次組件的封裝征冷，學(xué)習(xí)了作用域插槽择膝、父子組件的雙向綁定。同時(shí)检激，對(duì)于相同布局肴捉、特定布局的問(wèn)題，有了一些其他的思考呵扛。即：scoped的使用每庆。項(xiàng)目開(kāi)始前，能夠做好合理的規(guī)劃今穿，合理使用scoped缤灵，也可以在一定程度上節(jié)省css代碼。不過(guò)蓝晒，做一個(gè)時(shí)間跨度較長(zhǎng)的產(chǎn)品腮出，自己做相同的布局都有可能會(huì)有差異，更不用說(shuō)是和同事一起去做芝薇。不僅僅html布局有差異胚嘲，css，js邏輯也會(huì)因編碼習(xí)慣而不同洛二。
因此馋劈，通過(guò)這次組件的封裝，可以至少提高我在后面的工作效率晾嘶。
后續(xù)：
? ? ? ? 因?yàn)檫@類(lèi)頁(yè)面是固定的導(dǎo)航欄+搜索框+單據(jù)內(nèi)容+按鈕的妓雾，所以我是將所有的內(nèi)容都封裝在了一起的。
這樣一來(lái)可復(fù)用性程度降低了垒迂，不過(guò)應(yīng)該是可以提高我自己的工作效率的械姻。
快就完事了！
本次封裝如果有什么不足机断，還希望大佬給意見(jiàn)繼續(xù)優(yōu)化楷拳！
