Question

我使用带有this lib的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 warrning后进入chrome控制台：

[Vue警告]：避免直接改变道具，因为只要父组件重新渲染，该值就会被覆盖。而是根据prop的值使用数据或计算属性。支持被改变：＆＃34; someName＆＃34;

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

Answer 1

从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

Answer 2

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

我发现您使用的是速记@Model，但您需要@Provide来定义data属性。

@Provide() foo = 'foo'

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

Answer 3

TL：DR

我是Vue的新手（来自React），但是据我了解，上面的答案没有错，但是它没有回答如何使用@Model装饰器的问题。 Provide and Inject是将道具从父母传递给孩子的一种过分杀伤力。文档尚不清楚，所以我在这方面花了很多力气。但是请记住，该包引用了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>

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

3 个答案: