Vue2: 경고:프롭을 직접 뮤트하지 않음

Vue2: 경고:프롭을 직접 뮤트하지 않음

자녀 컴포넌트(자동완료)가 부모(Curve)의 값을 갱신해야 하고, 부모가 자녀 중 하나를 갱신해야 하는 상황(또는 새로운 Curve 컴포넌트가 사용되었을 때 완전히 재렌더해야 함)입니다.

내 앱에서 사용자는 원곡선 구성 요소 목록에서 원곡선을 선택할 수 있습니다.이전 코드는 올바르게 동작했지만 사용자가 목록에서 다른 곡선을 선택했을 때 컴포넌트가 자동으로 갱신되지 않았습니다(컴포넌트가 부모 값으로 값을 갱신하지 않았습니다).

이 문제는 해결되었지만 다음 경고가 표시됩니다.

상위 구성 요소가 다시 렌더링될 때마다 값이 덮어쓰기되므로 프로포트를 직접 변환하지 마십시오.대신 프로펠러 값을 기반으로 데이터 또는 계산된 속성을 사용하십시오.변형되는 프로펠러: "가치"

이 경고에 대한 설명은 구성 요소에서 예상되는 동작을 정확하게 설명합니다.이 경고에도 불구하고, 이 코드는 완벽하게 작동합니다!

다음은 코드입니다(심플화를 위해 일부 삭제).

// curve.vue
<template>
  <autocomplete v-model="curve.y"></autocomplete>
</template>


<script>
  import Autocomplete from './autocomplete'

  export default {
    name: 'Curve',
    props: {
      value: Object
    },
    computed: {
      curve() { return this.value }
    },
    components: { Autocomplete }
  }
</script>


// autocomplete.vue
<template>
    <input type="text" v-model="content"/>
</template>

<script>
  export default {
    name: 'Autocomplete',
    props: {
      value: {
        type: String,
        required: true
      }
    },
    computed: {
      content: {
        get() { return this.value },
        set(newValue) { this.value = newValue }
      }
    }
  }
</script>

많은 사람들이 같은 경고를 받고 있습니다.제가 찾은 솔루션을 몇 가지 시도해 봤지만, 제 상황에서 작동하지 않았습니다(이벤트를 사용하여 자동 완성 소품 유형을 객체로 변경, 다른 계산된 값을 사용하여...)

이 문제를 해결할 수 있는 간단한 해결책이 있나요?이 경고는 그냥 무시해야 하나요?

is code를 사용할 수 있습니다.prop->local data->$emit local data to prop모든 컴포넌트 및 컴포넌트 래퍼에 플로우합니다.

ps: $svputinput', ...)은 v-model에 의해 바인딩된 값(소품 내)의 갱신입니다.

// curve.vue
<template>
  <autocomplete v-model="curve.y"></autocomplete>
</template>


<script>
  import Autocomplete from './autocomplete'

  export default {
    name: 'Curve',
    props: {
      value: Object
    },
    data() {
      return { currentValue: this.value }
    }
    computed: {
      curve() { return this.currentValue }
    },
    watch: {
      'curve.y'(val) {
        this.$emit('input', this.currentValue);
      }
    },
    components: { Autocomplete }
  }
</script>


// autocomplete.vue
<template>
  <input type="text" v-model="content"/>
</template>

<script>
  export default {
    name: 'Autocomplete',
    props: {
      value: {
        type: String,
        required: true
      }
    },
    data() {
      return { currentValue: this.value };
    },
    computed: {
      content: {
        get() { return this.value },
        set(newValue) {
          this.currentValue = newValue; 
          this.$emit('input', this.currentValue);
        }
      }
    }
  }
</script>

무시해도 되고 모든 것이 잘 작동하지만, 이는 잘못된 관행입니다. vue가 알려주고 있는 것입니다.단일 책임 원칙을 따르지 않으면 코드를 디버깅하는 것이 훨씬 더 어려워집니다.

Vue는 데이터를 소유한 구성 요소만 수정할 수 있도록 권장합니다.

이벤트 솔루션의 원인을 알 수 없습니다($emit)이(가) 동작하지 않습니다.에러가 발생합니까?

이 경고를 없애려면.sync수식자 : https://vuejs.org/v2/guide/components.html#sync-Modifier

언급URL : https://stackoverflow.com/questions/46383657/vue2-warning-avoid-mutating-a-prop-directly