vue可不可以修改prop中的值

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

vue中不可以直接修改prop中的值，若直接修改vue會產生警告，且修改該屬性值并不能修改父組件對應的變量；但是可以通過觸發子組件事件，父組件監聽該事件并執行修改父組件的函數，通過監聽子組件事件做到雙向數據綁定來實現修改prop中的值。

本教程操作環境：windows10系統、Vue3版、Dell G3電腦。

vue可以修改prop中的值嗎

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

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

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

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

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

this.$props.modelValue = true;

Vue 將提出警告

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

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

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

Vue3 Props 文檔

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

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

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

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

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

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

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

實踐

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

Vant3 Field 文檔

這其中遇到的問題除了把 label 右置并根據 label 的內容自適應寬度外，就是 Vant 中的 <van-field /> 與我需要實現的 <right-label-input /> 以及放置 <right-label-input> 的父組件之間的數據流了。

錯誤做法

為了能夠與 <van-field /> 一致使用 v-model ，我在 <right-label-input /> 下設置 modelValue 屬性，然后將 <van-field> 的 v-model="modelValue"

<template>
<van-field :placeholder="placeholder" :name="name" v-model="modelValue" :disabled="disabled"/>
</template>

<script>
export default {
    name: "RightLabelInput",
    props: {
        modelValue: "",
    },
}
</script>

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

可能正確的做法

<template>
    <van-field :placeholder="placeholder"
               :name="name"
               v-model="input"

               :disabled="disabled"
    />
</template>

<script>
export default {
    name: "RightLabelInput",
    props: {
        placeholder: "",
        name: "",
        label: "",
        modelValue: "",
        disabled: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            input: this.modelValue, // 綁定到 data 的變量，防止直接修改 Props
        }
    },
    beforeMount() {
        this.input = this.modelValue
    },
    watch: {
        input(newInput, oldInput) {
            this.$emit("update:modelValue", newInput); // 監聽 input 在修改時發起事件，由父組件修改 modelValue 的值
        },
        modelValue(newValue, oldValue) {
            this.input = newValue;
        }
    }
}
</script>

<style scoped>

</style>

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