之前我們已經(jīng)學(xué)習(xí)了如何使用小模塊启具,今天我們就來用小模塊實(shí)現(xiàn)單項(xiàng)和多項(xiàng)選擇器椿争。
1.公共數(shù)據(jù)
為了能夠?qū)⑦x項(xiàng)列表傳給小模塊和從小模塊中獲取選擇結(jié)果柳击,這兩者都需要放在公共數(shù)據(jù)之中橄杨。另外單項(xiàng)選擇器中選擇結(jié)果可以用一個(gè)文本變量或者數(shù)值變量存儲(chǔ),而多項(xiàng)選擇器中我們需要用一個(gè)數(shù)組保存所有的已選選項(xiàng)素挽。這樣我們就可以將數(shù)據(jù)庫中或小模塊外數(shù)組中的選項(xiàng)賦值給小模塊蔑赘,通過獲取小模塊的公共數(shù)據(jù)屬性得知選擇結(jié)果(本案例中是使用了另一種方式獲取選擇結(jié)果)。
2.選項(xiàng)列表
在小模塊中我們需要根據(jù)公共數(shù)據(jù)中的選項(xiàng)列表進(jìn)行循環(huán)創(chuàng)建展示列表预明。
3.自定義事件
在小模塊選擇選項(xiàng)后我們一般會(huì)需要其它組件執(zhí)行一些動(dòng)作缩赛,所以需要給小模塊添加一個(gè)自定義事件,并且我們將選擇結(jié)果就作為事件的參數(shù)撰糠。這樣小模塊觸發(fā)自定義事件時(shí)就可以在事件下添加其它組件的動(dòng)作峦筒,而且也可以直接選擇事件的參數(shù)。
而小模塊內(nèi)部自然就是在選擇選項(xiàng)的時(shí)觸發(fā)這個(gè)自定義事件窗慎。單項(xiàng)選擇器中我們將選擇結(jié)果賦值給文本變量,然后將文本變量的值傳給事件參數(shù)并觸發(fā)自定義事件;多項(xiàng)選擇器則先進(jìn)行一個(gè)判斷遮斥,在一維數(shù)組中添加或刪除該選項(xiàng)峦失,最后將數(shù)組作傳給事件參數(shù)并觸發(fā)事件。(這也就是前文中提到的本案例使用的方法)
總結(jié)
需要注意一下的是术吗,之前的帖子中有說過更新公共數(shù)據(jù)后要執(zhí)行動(dòng)作將數(shù)據(jù)更新至小模塊尉辑,這個(gè)案例中我們是將公共數(shù)據(jù)通過自定義事件參數(shù)傳出的,所以不需要該動(dòng)作较屿。但是如果我們使用的是將小模塊的公共數(shù)據(jù)賦值給其它變量或組件的屬性隧魄,就一定要記得將數(shù)據(jù)更新至小模塊。