vue-model-decorator의 @model decorator는 vue-model을 생성합니다.변이 방지

vue-model-decorator의 @model decorator는 vue-model을 생성합니다.변이 방지

나는 이 lib에 타이프 스크립트를 사용한다.그리고 다음 코드가 파일에 있습니다.HomePage.vue:

<template>
    <div>Write something x: <input v-model="someName" type="text"></div>
</template>

<script lang="ts">
import { Component, Model, Vue } from "vue-property-decorator";

@Component
export default class HomePage extends Vue {
    @Model() someName: string;
}
</script>

컴파일 후 브라우저에서 실행하고 vue warrning 후 chrome 콘솔에 표시되는 입력 상자에 다음과 같이 입력합니다.

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

이 문제를 어떻게 해결할지 아세요?

TL: DR

저는 Vue(React에서 온)에 처음이지만, 위의 답변은 틀리지 않다고 알고 있습니다만, @Model decorator 사용법에 대한 질문에 대한 답변은 없습니다.공급 및 주입은 부모에서 자녀로 소품을 전달하기 위한 과잉 살상입니다.서류가 명확하지 않아서 이 건에 대해 머리를 많이 긁적였다.하지만 이 패키지가 의미하는 것은props.이런 이유로@Prop, @PropSync그리고.@Model자 구성 요소에 있어야 합니다.이렇게 하면 콘솔 오류는 사라지지 않습니다.상위 구성 요소:

<template>
  <div>
     <input type="text" v-model="modelText" />
    <Child 
      :modelText="modelText"
    />
  </div>
</template>

<script lang="ts">
import Component from 'vue-class-component';
import Vue from 'vue';
import Child from './Child.vue';

@Component({
  components: {
    Child,
  }
})
export default class Parent extends Vue {
  private modelText: string = 'model-text';
}
</script>

또한 하위 구성요소의 경우:

<template>
    <div>
      @Model: {{modelText}}
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop, PropSync, Model } from 'vue-property-decorator';

@Component({

})
export default class Child extends Vue {
  @Model('input', { type: String }) modelText!: string;
}
</script>

버전 9.1.2 이후view-property-decorator현재 지원되고 있는 것은@VModel데코레이터

어디에

import { Vue, Component, VModel } from 'vue-property-decorator'

@Component
export default class CustomComponent extends Vue {
  @VModel() name!: string
}

쌍방향 바인딩을 사용할 수 있습니다.name컴포넌트 내부 및v-model="..."바깥에서.귀찮은 경고도 없이!

https://github.com/kaorun343/vue-property-decorator#-vmodelpropsargs-propoptions-decorator

v-model의 경우 내부에 정의된 속성을 사용해야 합니다.data.

속기법을 쓰시는군요@Model하지만 네게 필요한 것은@Provide정의하다data특성.

@Provide() foo = 'foo'

https://github.com/kaorun343/vue-property-decorator 를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/47607338/model-decorator-from-vue-property-decorator-generates-vue-warn-avoid-mutating