最近項目在使用antd組件庫做項目,頁面中大量使用了a-modal彈窗.但是由於a-modal不能滿足實際項目中的結構需要.為了方便復用,所以需要圍繞a-modal進行二次封裝.由此便引發了'如何通過props設置vue子組件的顯示與隱藏'.其實主要問題是vue本身為了保證單向數據流,所以在子組件內部不能直接修改props.
1.1父組件代碼
1.2子組件代碼
1.3代碼說明
(1)首先在父組件內給子組件的標簽綁定一個自定義屬性visible,默認值為false,父組件內的按鈕事件可以修改visible為true,從而達到讓子組件顯示的目的.
(2)子組件內部通過props來接收父組件傳遞過來的visible,通過v-show綁定到子組件的標簽上,由於vue的單向數據流,子組件的按鈕事件不能直接修改visible,所以利用$emit觸發父組件內的事件
(3)在父組件內的標簽上定義子組件觸發的事件,然后在事件內部書寫邏輯代碼,修改父組件的visible.讓props再次更新,子組件重新接收值為false,從而讓子組件隱藏.
2.1父組件代碼
2.2子組件代碼
2.3代碼說明
(1)父組件內通過綁定visible.sync來傳遞props,按鈕事件修改visible為true,注意這里多加了一個'.sync'
(2)子組件通過props來接收visible,
(3)與第一種方法不同的是,$emit不再觸發父組件內的事件,而是通過$emit('update:visible', false)通知父組件,直接修改visible為false.
3總結
以上兩種方法的思路大致一樣.不過我在項目中使用的是第一種,因為考慮到這種方式的易於理解和書寫.另外如果只是單純的控制子組件顯示和隱藏,可以在父組件的標簽上綁定v-if或v-show,而子組件內直接通過設置v-show或者v-if為true.這樣只需要在父組件內動態修改綁定的值即可.個人不太喜歡這種方式.