来自 vue-property-decorator 的 @model 装饰器生成 vue-warn：避免变异

Question

我在这个库中使用打字稿。我在文件中有以下代码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>

编译后，在浏览器中运行并在输入框中输入一些内容，我在 chrome 控制台中得到以下 vue 警告：

[Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，值都会被覆盖。相反，根据道具的值使用数据或计算属性。道具被变异：“someName”

知道如何解决这个问题吗？

Answer 1

翻译：博士

我是 Vue 的新手（来自 React），但据我所知，上面的答案并没有错，但它没有回答如何使用 @Model 装饰器的问题。提供和注入对于将道具从父级传递给子级来说是一种矫枉过正。文档不清楚，所以我在这个问题上很头疼。但请记住，该包指的是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>

Answer 2

从 v. 9.1.2view-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

Answer 3

对于 v-model，您应该使用内部定义的属性data。

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

@Provide() foo = 'foo'

参见https://github.com/kaorun343/vue-property-decorator