vue 子組件修改props引用類型參數(shù)引發(fā)的思考

周國輝發(fā)布于2019-08-23 18:09 / 1875人閱讀

摘要：但是當(dāng)傳遞的參數(shù)為對象或者數(shù)組的時(shí)候，是通過引用傳入的，所以對于一個引用類型的來說，在子組件中改變這個參數(shù)本身將會影響到父組件的數(shù)據(jù)狀態(tài)。

問題

父級組件與子組件的通信一般都是通過props來實(shí)現(xiàn)的，因?yàn)閿?shù)據(jù)流向的單一才能保證數(shù)據(jù)變化的可追蹤性，在vue中props遵循的是單向數(shù)據(jù)流，原則上子組件修改props是不被允許的。
但是當(dāng)props傳遞的參數(shù)為對象或者數(shù)組的時(shí)候，是通過引用傳入的，所以對于一個引用類型的prop來說，在子組件中改變這個參數(shù)本身將會影響到父組件的數(shù)據(jù)狀態(tài)。更關(guān)鍵的是，我們打開控制臺，會發(fā)現(xiàn)完全沒有報(bào)錯...
這就會導(dǎo)致父組件的data混亂，而且難以捕捉，所以對于這種情況可以這樣處理。

解決方案

在子組件中聲明新變量，然后把prop深拷貝賦值給新變量，之后子組件就使用新變量。
但是這種情況下父組件改變參數(shù)時(shí)，子組件無法更新參數(shù)，需要時(shí)可以通過watch或者computed來實(shí)現(xiàn)實(shí)時(shí)更新

云服務(wù)器 GPU云服務(wù)器引用類型的變量 js引用類型的存儲 js引用的數(shù)據(jù)類型 vue組件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104756.html

相關(guān)文章

詳解vue組件三大核心概念

摘要：前言本文主要介紹屬性事件和插槽這三個基礎(chǔ)概念使用方法及其容易被忽略的一些重要細(xì)節(jié)。至于如何改變，我們接下去詳細(xì)介紹單向數(shù)據(jù)流這個概念出現(xiàn)在組件通信。比如上例中在子組件中修改父組件傳遞過來的數(shù)組從而改變父組件的狀態(tài)。的一個核心思想是數(shù)據(jù)驅(qū)動。前言本文主要介紹屬性、事件和插槽這三個vue基礎(chǔ)概念、使用方法及其容易被忽略的一些重要細(xì)節(jié)。如果你閱讀別人寫的組件，也可以從這三個部分展開，它們...

rickchen 2019-08-23 17:51 評論0 收藏0
封裝Vue組件的一些技巧

摘要：根據(jù)組件單向數(shù)據(jù)流和和事件通信機(jī)制，需要由子組件通過事件通知父組件，并在父組件中修改原始的數(shù)據(jù)，完成狀態(tài)的更新。本文同步在個人博客shymean.com上，歡迎關(guān)注寫Vue有很長一段時(shí)間了，除了常規(guī)的業(yè)務(wù)開發(fā)之外，也應(yīng)該思考和反思一下封裝組件的正確方式。以彈窗組件為例，一種實(shí)現(xiàn)是在需要模板中引入需要彈窗展示的組件，然后通過一個flag變量來控制彈窗的組件，在業(yè)務(wù)代碼里面會充斥著冗余的彈...

韓冰 2019-05-23 17:35 評論0 收藏0
vue總結(jié)系列--組件化

摘要：觸發(fā)事件可以攜帶數(shù)據(jù)，這些數(shù)據(jù)被用于傳遞給綁定了事件的其它組件的回調(diào)函數(shù)上，進(jìn)而被傳遞給其它組件。父組件可以在回調(diào)函數(shù)里做任何事情，頗有靈活性。一般情況下，父組件會在回調(diào)函數(shù)中更新自己的狀態(tài)數(shù)據(jù)。上一篇博文梳理了vue的數(shù)據(jù)驅(qū)動和響應(yīng)式相關(guān)的特性，這一篇博文就來梳理vue的一個很重要的特性，組件化。自定義組件之于vue，其意義不亞于函數(shù)之于C，java之類的編程語言。函數(shù)是計(jì)算機(jī)科學(xué)...

cuieney 2019-08-22 18:28 評論0 收藏0
vue項(xiàng)目props傳值類型影響：單項(xiàng)數(shù)據(jù)流及雙向數(shù)據(jù)流

摘要：簡單總結(jié)在使用傳遞數(shù)據(jù)的過程中，如果傳遞的是基本數(shù)據(jù)類型，則在子組件中不能修改父組件傳遞過來的值，此時(shí)符合的單向數(shù)據(jù)流方式如果傳遞的是引用型數(shù)據(jù)類型，則此時(shí)可以在子組件操作父組件傳遞過來的值，此時(shí)數(shù)據(jù)可以雙向通信，違背單向數(shù)據(jù)流方式。第一：傳遞string、number等基本數(shù)據(jù)類型：在構(gòu)建vue項(xiàng)目中，props是子組件獲取父組件的一種形式；在子組件中不可修改父組件傳遞的參數(shù)，代碼...

makeFoxPlay 2019-08-26 10:24 評論0 收藏0
理解vue中的組件（二）

摘要：往往定義組件的構(gòu)造器后，不需要手動的進(jìn)行初始化，而是在其他組件的模板中當(dāng)成標(biāo)簽來使用，這時(shí)候需要調(diào)用注冊成組件。這樣設(shè)計(jì)的目的是防止從子組件意外改變父級組件的狀態(tài)，從而導(dǎo)致應(yīng)用的數(shù)據(jù)流向難以理解。上節(jié)說到組件https://segmentfault.com/a/1190000009236700，這一節(jié)繼續(xù)來學(xué)習(xí)組件：原文博客地址，歡迎學(xué)習(xí)交流:點(diǎn)擊預(yù)覽從github上獲取本文代碼：...

Nino 2019-08-23 12:11 評論0 收藏0