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 中的 與我需要實現的 以及放置 的父元件之間的資料流了。

錯誤做法

為了能夠與

一致使用v-model ，我在< right-label-input /> 下方設定modelValue 屬性，然後將 的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.js教學》】

以上是vue可以修改prop中的值嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！