今天小編給大家分享一下vue可不可以修改prop中的值的相關知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)公司服務緊隨時代發(fā)展步伐，進行技術革新和技術進步，經(jīng)過10年的發(fā)展和積累，已經(jīng)匯集了一批資深網(wǎng)站策劃師、設計師、專業(yè)的網(wǎng)站實施團隊以及高素質(zhì)售后服務人員，并且完全形成了一套成熟的業(yè)務流程，能夠完全依照客戶要求對網(wǎng)站進行網(wǎng)站設計制作、成都網(wǎng)站建設、建設、維護、更新和改版，實現(xiàn)客戶網(wǎng)站對外宣傳展示的首要目的，并為客戶企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。

vue中不可以直接修改prop中的值，若直接修改vue會產(chǎn)生警告，且修改該屬性值并不能修改父組件對應的變量；但是可以通過觸發(fā)子組件事件，父組件監(jiān)聽該事件并執(zhí)行修改父組件的函數(shù)，通過監(jiān)聽子組件事件做到雙向數(shù)據(jù)綁定來實現(xiàn)修改prop中的值。

本教程操作環(huán)境：windows10系統(tǒng)、Vue3版、Dell G3電腦。

vue可以修改prop中的值嗎

在Vue中，prop是可以接受由父組件傳遞給子組件的屬性，但prop無法進行修改的。

如果prop被強制修改，會有警告

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外變更父級組件的狀態(tài)，從而導致你的應用的數(shù)據(jù)流向難以理解。

另外，每次父級組件發(fā)生變更時，子組件中所有的 prop 都將會刷新為最新的值。這意味著你不應該在一個子組件內(nèi)部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制臺中發(fā)出警告。

嘗試通過下面的方法直接修改屬性值

this.$props.modelValue = true;

Vue 將提出警告

Set operation on key “modelValue” failed: target is readonly.

且修改該屬性值并不能修改父組件對應的變量，僅僅適用于基礎數(shù)據(jù)類型。

注意在 JavaScript 中對象和數(shù)組是通過引用傳入的，所以對于一個數(shù)組或?qū)ο箢愋偷?prop 來說，在子組件中改變這個對象或數(shù)組本身將會影響到父組件的狀態(tài)，且 Vue 無法為此向你發(fā)出警告。作為一個通用規(guī)則，應該避免修改任何 prop，包括對象和數(shù)組，因為這種做法無視了單向數(shù)據(jù)綁定，且可能會導致意料之外的結果。

Vue3 Props 文檔

正確的修改方法是觸發(fā)子組件事件，父組件監(jiān)聽該事件并執(zhí)行修改父組件的函數(shù)，以 v-model 為例，v-model 本身就是傳遞給子組件的 modelValue 屬性，然后監(jiān)聽 update:modelValue 事件來做到雙向數(shù)據(jù)綁定，所以我們也可以通過該方法來在代碼中修改 modelValue

this.$emit("update:modelValue", !this.$props.modelValue);

v-model 將自動監(jiān)聽 update:modelValue 事件并將 modelValue 修改為觸發(fā)事件時傳遞的參數(shù)值（即 $emit 的第二個參數(shù)）。

需要注意的是，這種通過觸發(fā)事件-監(jiān)聽事件的數(shù)據(jù)流模式并不能馬上生效，如果使用以下代碼

this.$emit("update:modelValue", !this.$props.modelValue);console.log(this.$props.modelValue);

會發(fā)現(xiàn)輸出到控制臺的仍然是 modelValue 原先的值，這是因為觸發(fā)事件-監(jiān)聽事件的模式下屬性值的修改需要時間，改用以下代碼會發(fā)現(xiàn)輸出正常：

this.$emit("update:modelValue", !this.$props.modelValue);setTimeout(()=> {console.log(this.$props.modelValue)}, 1000)

實踐

由于 Vant 只實現(xiàn)了左邊放 label 的輸入框，想基于此實現(xiàn)一個 label 在右邊的輸入框

Vant3 Field 文檔

這其中遇到的問題除了把 label 右置并根據(jù) label 的內(nèi)容自適應寬度外，就是 Vant 中的 與我需要實現(xiàn)的 以及放置 的父組件之間的數(shù)據(jù)流了。

錯誤做法

為了能夠與 一致使用 v-model ，我在 下設置 modelValue 屬性，然后將 的 v-model="modelValue"

無疑，這種做法違背了單向數(shù)據(jù)流原則，在 VanField 修改時將直接影響 RightLabelInput 的 modelValue 值，而 modelValue 是 RightLabelInput 的屬性，不能直接修改。

可能正確的做法

以上就是“vue可不可以修改prop中的值”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。