Vue在頁(yè)面右上角實(shí)現(xiàn)可懸浮/隱藏的系統(tǒng)菜單

意思是：避免修改prop值，因?yàn)楦附M件一旦re-render，這個(gè)值就會(huì)被覆蓋；

另外，盡管在這個(gè)按鈕上實(shí)現(xiàn)了顯示狀態(tài)的切換，但是點(diǎn)擊其他區(qū)域的時(shí)候，并不會(huì)隱藏它，原因是：子組件prop值的變化并沒(méi)有影響到父組件，因此showCancel的值一直保持初始值沒(méi)有變化，而只有在這個(gè)值被更新時(shí)才會(huì)觸發(fā)子組件中相關(guān)值的更新。

——好吧，那么老老實(shí)實(shí)的用一個(gè)計(jì)算屬性接收showCancel值，這樣實(shí)現(xiàn)點(diǎn)擊子組件控制系統(tǒng)菜單的狀態(tài)切換；

獲得了計(jì)算屬性ifShowCancel，組件相應(yīng)的變成了v-show="ifShowCancel"，我試圖在綁定事件里通過(guò)this.ifShowCancel=!this.ifShowCancel切換菜單狀態(tài)，報(bào)錯(cuò)，得到報(bào)錯(cuò)信息：Computed property "ifShowCancel" was assigned to but it has no setter；

明白了，要以直接賦值的形式改變計(jì)算屬性ifShowCancel的值，需要一個(gè)setter函數(shù)，但是setter函數(shù)中無(wú)法修改prop值，因此在getter中也就無(wú)法通過(guò)return this.showCancel來(lái)更新這個(gè)計(jì)算屬性，所以這個(gè)方法貌似也行不通；

到此為止，好像路都成了堵死狀態(tài)：prop值不能改->要用計(jì)算屬性；計(jì)算屬性不能改->需要setter；而寫(xiě)入了getter、setter，計(jì)算屬性的值依賴(lài)于prop值->prop值不能改。——一個(gè)堪稱(chēng)完美的閉環(huán)誕生了！

走投無(wú)路之際我想起了$emit和$on這一對(duì)。

3. 父子互相通信

前邊的prop實(shí)現(xiàn)了從父到子的單向通信，而通過(guò)$emit和$on，就可以實(shí)現(xiàn)從子組件到父組件的通信：這不能直接修改父組件的屬性，但卻可以觸發(fā)父組件的指定綁定事件，并將一個(gè)值傳入父組件。

在這一步我摒棄了點(diǎn)擊按鈕時(shí)的去操作子組件內(nèi)屬性的想法，既然計(jì)算屬性ifShowCancel依賴(lài)于prop值，那么就在點(diǎn)擊按鈕時(shí)，通過(guò)$emit觸發(fā)父組件的事件，并將需要修改的屬性值傳入父組件，于是：

這樣處理流程就變成了：點(diǎn)擊按鈕->作為計(jì)算屬性的ifShowCancel值傳入父組件并觸發(fā)父組件事件，對(duì)showCancel賦值->父組件屬性更新->觸發(fā)子組件prop更新->觸發(fā)重新compute，更新ifShowCancel值->v-show起作用。
另外在點(diǎn)擊其他區(qū)域時(shí)，通過(guò)父組件綁定的click事件，就可以重置showCancel值，進(jìn)而隱藏掉出現(xiàn)的系統(tǒng)菜單。

下邊放出這個(gè)功能的完整代碼。

4. 完整代碼

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com