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- 데이터 바인딩

방식이므로 이 메소드를 사용하여 modelValue

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

v-model를 수정할 수도 있습니다. 그러면 자동으로 update:modelValue를 수신하게 됩니다. 이벤트를 modelValue로 대체합니다. 이벤트가 트리거될 때 전달되는 매개변수 값(즉, $emit의 두 번째 매개변수)으로 수정합니다.

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

를 사용하면 콘솔에 대한 출력이 여전히 modelValue라는 것을 알 수 있습니다. code> 원래 값인데, 이는 Trigger event-listen 이벤트 모드에서 속성 값을 수정하는 데 시간이 걸리기 때문입니다. 다음 코드를 사용하면 정상적으로 출력되는 것을 확인할 수 있습니다: <p>rrreee<a href="https://www.php.cn/vuejs/" target="_blank">Practice</a></p>Vant만 해당됩니다. 왼쪽 입력 상자에 <code>라벨을 구현합니다. 오른쪽에 있는 이 입력 상자를 기반으로 라벨을 구현하고 싶습니다🎜🎜Vant3 Field document🎜🎜여기에서 발생하는 문제는 다음과 같습니다. 라벨을 오른쪽에 배치하고 라벨에 추가하여 <van-field>입니다. Vant 및 <right-label-input /&gt에서 ;와 <right-label-input>가 배치된 상위 구성요소 사이의 데이터 흐름을 구현해야 합니다. . 🎜🎜잘못된 접근 방식🎜🎜 <van-field />와 함께 v-model을 일관되게 사용하려면 <right-label-을 사용했습니다. input / > <van-field> 아래에 modelValue 속성을 ​​설정하세요. 🎜의심할 바 없이 이 접근 방식은 단방향 데이터 흐름의 원칙을 위반합니다. code>VanField가 수정되면 RightLabelInput의 modelValue 값에 직접적인 영향을 미치며 modelValue는 의 속성입니다. RightLabelInput이며 직접 수정할 수 없습니다. 🎜🎜아마도 올바른 접근 방식🎜rrreee🎜🎜키워드🎜: 단방향 데이터 흐름🎜🎜[관련 권장 사항: "🎜vue.js tutorial🎜"]🎜

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