vue可不可以修改prop中的值

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

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

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

vue可以修改prop中的值嗎

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

如果prop被強(qiáng)制修改，會(huì)有警告

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

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

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

this.$props.modelValue = true;

Vue 將提出警告

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

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

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

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 將自動(dòng)監(jiān)聽 update:modelValue 事件并將 modelValue 修改為觸發(fā)事件時(shí)傳遞的參數(shù)值（即 $emit 的第二個(gè)參數(shù)）。

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

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

會(huì)發(fā)現(xiàn)輸出到控制臺(tái)的仍然是 modelValue 原先的值，這是因?yàn)橛|發(fā)事件-監(jiān)聽事件的模式下屬性值的修改需要時(shí)間，改用以下代碼會(huì)發(fā)現(xiàn)輸出正常：

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

實(shí)踐

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

Vant3 Field 文檔

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

錯(cuò)誤做法

為了能夠與 <van-field /> 一致使用 v-model ，我在 <right-label-input /> 下設(shè)置 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>

無疑，這種做法違背了單向數(shù)據(jù)流原則，在 VanField 修改時(shí)將直接影響 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); // 監(jiān)聽 input 在修改時(shí)發(fā)起事件，由父組件修改 modelValue 的值
        },
        modelValue(newValue, oldValue) {
            this.input = newValue;
        }
    }
}
</script>

<style scoped>

</style>

以上就是“vue可不可以修改prop中的值”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。