Vue在頁面右上角實現可懸浮/隱藏的系統菜單

意思是：避免修改prop值，因為父組件一旦re-render，這個值就會被覆蓋；

另外，盡管在這個按鈕上實現了顯示狀態的切換，但是點擊其他區域的時候，并不會隱藏它，原因是：子組件prop值的變化并沒有影響到父組件，因此showCancel的值一直保持初始值沒有變化，而只有在這個值被更新時才會觸發子組件中相關值的更新。

——好吧，那么老老實實的用一個計算屬性接收showCancel值，這樣實現點擊子組件控制系統菜單的狀態切換；

獲得了計算屬性ifShowCancel，組件相應的變成了v-show="ifShowCancel"，我試圖在綁定事件里通過this.ifShowCancel=!this.ifShowCancel切換菜單狀態，報錯，得到報錯信息：Computed property "ifShowCancel" was assigned to but it has no setter；

明白了，要以直接賦值的形式改變計算屬性ifShowCancel的值，需要一個setter函數，但是setter函數中無法修改prop值，因此在getter中也就無法通過return this.showCancel來更新這個計算屬性，所以這個方法貌似也行不通；

到此為止，好像路都成了堵死狀態：prop值不能改->要用計算屬性；計算屬性不能改->需要setter；而寫入了getter、setter，計算屬性的值依賴于prop值->prop值不能改。——一個堪稱完美的閉環誕生了！

走投無路之際我想起了$emit和$on這一對。

3. 父子互相通信

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

在這一步我摒棄了點擊按鈕時的去操作子組件內屬性的想法，既然計算屬性ifShowCancel依賴于prop值，那么就在點擊按鈕時，通過$emit觸發父組件的事件，并將需要修改的屬性值傳入父組件，于是：

這樣處理流程就變成了：點擊按鈕->作為計算屬性的ifShowCancel值傳入父組件并觸發父組件事件，對showCancel賦值->父組件屬性更新->觸發子組件prop更新->觸發重新compute，更新ifShowCancel值->v-show起作用。
另外在點擊其他區域時，通過父組件綁定的click事件，就可以重置showCancel值，進而隱藏掉出現的系統菜單。

下邊放出這個功能的完整代碼。

4. 完整代碼

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com