摘要:但是當傳遞的參數為對象或者數組的時候,是通過引用傳入的,所以對于一個引用類型的來說,在子組件中改變這個參數本身將會影響到父組件的數據狀態。
問題
父級組件與子組件的通信一般都是通過props來實現的,因為數據流向的單一才能保證數據變化的可追蹤性,在vue中props遵循的是單向數據流,原則上子組件修改props是不被允許的。
但是當props傳遞的參數為對象或者數組的時候,是通過引用傳入的,所以對于一個引用類型的prop來說,在子組件中改變這個參數本身將會影響到父組件的數據狀態。更關鍵的是,我們打開控制臺,會發現完全沒有報錯...
這就會導致父組件的data混亂,而且難以捕捉,所以對于這種情況可以這樣處理。
解決方案
在子組件中聲明新變量,然后把prop深拷貝賦值給新變量,之后子組件就使用新變量。
但是這種情況下父組件改變參數時,子組件無法更新參數,需要時可以通過watch或者computed來實現實時更新
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/104756.html
摘要:前言本文主要介紹屬性事件和插槽這三個基礎概念使用方法及其容易被忽略的一些重要細節。至于如何改變,我們接下去詳細介紹單向數據流這個概念出現在組件通信。比如上例中在子組件中修改父組件傳遞過來的數組從而改變父組件的狀態。的一個核心思想是數據驅動。 前言 本文主要介紹屬性、事件和插槽這三個vue基礎概念、使用方法及其容易被忽略的一些重要細節。如果你閱讀別人寫的組件,也可以從這三個部分展開,它們...
摘要:根據組件單向數據流和和事件通信機制,需要由子組件通過事件通知父組件,并在父組件中修改原始的數據,完成狀態的更新。 本文同步在個人博客shymean.com上,歡迎關注 寫Vue有很長一段時間了,除了常規的業務開發之外,也應該思考和反思一下封裝組件的正確方式。以彈窗組件為例,一種實現是在需要模板中引入需要彈窗展示的組件,然后通過一個flag變量來控制彈窗的組件,在業務代碼里面會充斥著冗余的彈...
摘要:觸發事件可以攜帶數據,這些數據被用于傳遞給綁定了事件的其它組件的回調函數上,進而被傳遞給其它組件。父組件可以在回調函數里做任何事情,頗有靈活性。一般情況下,父組件會在回調函數中更新自己的狀態數據。 上一篇博文梳理了vue的數據驅動和響應式相關的特性,這一篇博文就來梳理vue的一個很重要的特性,組件化。自定義組件之于vue,其意義不亞于函數之于C,java之類的編程語言。函數是計算機科學...
摘要:簡單總結在使用傳遞數據的過程中,如果傳遞的是基本數據類型,則在子組件中不能修改父組件傳遞過來的值,此時符合的單向數據流方式如果傳遞的是引用型數據類型,則此時可以在子組件操作父組件傳遞過來的值,此時數據可以雙向通信,違背單向數據流方式。 第一:傳遞string、number等基本數據類型:在構建vue項目中,props是子組件獲取父組件的一種形式;在子組件中不可修改父組件傳遞的參數,代碼...
摘要:往往定義組件的構造器后,不需要手動的進行初始化,而是在其他組件的模板中當成標簽來使用,這時候需要調用注冊成組件。這樣設計的目的是防止從子組件意外改變父級組件的狀態,從而導致應用的數據流向難以理解。 上節說到組件https://segmentfault.com/a/1190000009236700,這一節繼續來學習組件: 原文博客地址,歡迎學習交流:點擊預覽從github上獲取本文代碼:...
閱讀 2347·2019-08-30 15:44
閱讀 1272·2019-08-30 13:01
閱讀 3313·2019-08-30 11:22
閱讀 3099·2019-08-29 15:23
閱讀 1621·2019-08-29 12:22
閱讀 3380·2019-08-26 13:58
閱讀 3448·2019-08-26 12:17
閱讀 3486·2019-08-26 12:16