@来自vue-属性-装饰器的模型装饰器生成vue-警告：避免突变

Question

我在这个库中使用typescript。我在文件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警告后chrome控制台中的输入框中键入内容：

[Vue warn]：避免直接改变道具，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于道具值的数据或计算属性。道具变异：“某物名”

你知道怎么解决这个问题吗？

Answer 1

对于v型，应使用在数据中定义的特性。

我看到您正在使用一个速记@Model，但是您需要的是@Supply来定义data属性。

提供（）foo='foo'

看https://github.com/kaorun343/vue-property-decorator

Answer 2

自从v.9.1.2view-属性-装饰器现在支持@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装饰器

Answer 3

TL:DR

我是Vue新手（来自React），但据我所知，上面的答案没有错，但它没有回答如何使用@Model decorator的问题。提供和注入是将道具从父代传递给子代的一种过度使用。文档不清楚，所以我在这个问题上费尽心思。但请记住，该包指的是道具。因此，@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>