vue가 prop의 값을 수정할 수 있나요?

vue에서 prop의 값을 직접 수정할 수는 없습니다. vue를 직접 수정하면 경고가 발생하며 속성 값을 수정하면 상위 구성 요소에 해당하는 변수를 수정할 수 없습니다. 그러나 하위 구성 요소 이벤트를 트리거할 수 있습니다. 상위 구성 요소는 이벤트를 수신하고 실행합니다. 상위 구성 요소의 기능을 수정하고 하위 구성 요소 이벤트를 수신하여 prop의 값을 수정함으로써 양방향 데이터 바인딩을 구현합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, Vue3 버전, Dell G3 컴퓨터.

vue가 prop의 값을 수정할 수 있나요?

Vue에서 prop은 상위 구성 요소에서 하위 구성 요소로 전달된 속성을 허용할 수 있지만 prop은 수정할 수 없습니다.

prop가 강제로 수정되면 경고가 표시됩니다.

모든 prop은 부모와 자식 prop 사이에 단방향 하향 바인딩을 형성합니다. 부모 prop의 업데이트는 자식 구성 요소로 아래로 흐르지만 그 반대의 경우도 마찬가지입니다. 아니요 . 이렇게 하면 하위 구성 요소가 실수로 상위 구성 요소의 상태를 변경하여 애플리케이션의 데이터 흐름을 이해하기 어렵게 만드는 것을 방지할 수 있습니다.

또한 상위 구성 요소가 변경될 때마다 하위 구성 요소의 모든 props가 최신 값으로 새로 고쳐집니다. 즉, 하위 구성 요소 내부의 소품을 변경하면 안 됩니다. 이렇게 하면 Vue는 브라우저 콘솔에 경고를 표시합니다.

다음 방법을 통해 속성 값을 직접 수정해 보세요

this.$props.modelValue = true;

Vue에서 경고가 표시됩니다

"modelValue" 키에 대한 설정 작업 실패: 대상이 읽기 전용입니다.

그리고 속성 값을 수정하면 해당 변수를 수정할 수 없습니다. 상위 구성 요소에는 기본 데이터 유형에만 적용됩니다.

JavaScript에서 객체와 배열은 참조로 전달되므로 배열이나 객체 유형 prop의 경우 하위 구성 요소에서 객체나 배열 자체를 변경하면 상위 구성 요소의 상태에 영향을 미치므로 Vue에서는 경고할 수 없습니다. 이것에 대해 . 일반적으로 개체 및 배열을 포함한 소품을 수정하지 않아야 합니다. 이렇게 하면 단방향 데이터 바인딩이 무시되고 예상치 못한 결과가 발생할 수 있습니다.

Vue3 Props Document

올바른 수정 방법은 하위 구성 요소 이벤트를 트리거하는 것입니다. 상위 구성 요소는 이벤트를 수신하고 상위 구성 요소를 수정하는 함수를 실행합니다. v-model을 예로 들어 보겠습니다. , v-model 자체는 하위 구성 요소에 전달된 modelValue 속성이며, update:modelValue 이벤트를 수신하여 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 是 RightLabelInputtwo- 데이터 바인딩

<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>

로그인 후 복사

이벤트를 트리거하고 이벤트를 모니터링하는 이 데이터 흐름 모드는 즉시 적용되지 않습니다. 다음 코드rrreee

위 내용은 vue가 prop의 값을 수정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!