前言:在vue項目中,子組件是一個彈框,需要在父組件中顯示此彈框,其彈框內容來自於父組件。父子組件之間的傳值通過props來實現。
A爲父組件頁面,B爲子組件頁面。其中父組件頁面調用子組件,v-bind綁定要傳遞的值chargePeriodArr。
A頁面設置如下:
而chargePeriodArr是動態的,有一個地方給它賦值。
子組件B頁面props接收父組件傳過來的數據:
子組件接受父組件的值分爲--引用類型和普通類型兩種;
①普通類型:字符串(String)、數字(Number)、布爾值(Boolean)、空(Null);
②引用類型:數組(Array)、對象(Object)。
其中,引用類型的值,當在子組件中修改後,父組件的也會被修改,那麼,其他同樣引用了該值的子組件內部的值也會跟着被修改。
爲避免這種錯誤,我們可以設置一個從父組件傳過來的數據的copy,如chargePeriodArr1,這個就可以保證chargePeriodArr沒有被修改,修改的只是chargePeriodArr1。
參考博客:
父組件向子組件傳遞數組 https://blog.csdn.net/guojing5721/article/details/96156600