Vue JS - vue-class-component 绑定输入

Question

我目前正在使用 TS 开发 Vue 2 项目，使用这些库进行组件设置： vue-class-component和vue-property-decorator

我需要创建一个表单组件，但是我很难处理数据绑定，因为当我为表单组件使用 data() 选项时，它会在编译时产生错误。

有没有办法在不使用 data() 选项的情况下绑定输入数据？

我得到的错误：

ERROR in /path/to/components/folder/Form.vue

Property 'id' does not exist in type 'Form'.

有关更多上下文，这是我的代码：

@Component
export default class Form extends Vue {
//Bind form data
data() {
    return {
        id: "",
        name: "",
        age: 0,
        amountA: 0,
        amountB: 0,
        capitalA: 0,
        capitalB: 0
    } 
}

onSubmit(e: any): void {
    e.preventDefault();
    //Create new class object
    const newClass = {
        id: this.id,
        name: this.name,
        age: this.age,
        amountA: this.amountA,
        amountB: this.amountB,
        capitalA: this.capitalA,
        capitalB: this.capitalB
    }

    //Emit the class object to parent component
    this.$emit("add-class", newClass);
    this.$emit("update-total");

    //Reset Form
    this.id = ""
    this.name = ""
    this.age = 0
    this.amountA = 0
    this.amountB = 0
    this.capitalA = 0
    this.capitalB = 0

}

这是我控制台上的错误：控制台错误

任何人都可以帮助我解决这些错误。 谢谢！

Answer 1

在 Vue class 组件装饰器中，Options API 的data() function 被抽象掉了。

@Component装饰器是一个 function 负责将您的代码从 Class API 语法转换为选项 ZDB9742CE38714CA8DE634A 语法。

即，在幕后：

• 所有 class 道具都变成了data()反应道具，
• 所有的 getter/setter 都变成了computed的 props
• 所有 class 方法（常规函数）都变成了methods 。

所以直接在 class 实例上声明 props：

@Component
export default class Form extends Vue {
  id = "";
  name = "";
  age = 0;
  amountA = 0;
  amountB = 0;
  capitalA = 0;
  capitalB = 0;

  // props declared above are reactive and you can now use them
  // in getters or methods
}

请参阅概览页面中的示例。 更详细地说，这个特定的评论：

// Class 属性将是组件数据

---

警告：如果您刚刚开始使用 Vue，请注意 Vue class 装饰器语法的使用趋势正在下降，并且 Vue 3 兼容性问题是可以预料的（并且已经开始浮出水面）。 看看他们回购的未解决问题。

同样，您可能想阅读 Evan You ¹的此评论，参考 Vue class 组件装饰器的用法：

在官方文档或默认工具中，它绝对不再是推荐的选项（很快就会迁移到基于 Vite 并且 vue-cli 将处于维护模式）。
弃用将取决于实际使用情况和@ktsn ²对进一步处理该项目的意图。

¹ :: Vue的作者
² :: vue-class-component package 的维护者

---

个人建议：在你的 Vue 2 项目中安装@vue/composition-api并用 Composition API 语法重写它的组件比用 class 装饰器语法编写对你自己和项目更有益。

在执行此操作时，您将

• 使项目可以相对轻松地升级到 Vue 3
• 学习组合 API（可能会成为更常见的 Vue 语法），这对你来说更有价值，比学习组件 class 装饰器语法和解决方法，（可能会变得更少使用，最终被弃用）

由于 class 装饰器语法的流行度正在下降，随着时间的推移，对它的支持可能会变得更加难以获得。

如果在 Composition API 中重写现有组件不是一个选项，您至少可以使用此语法编写新组件，因为该语法可以逐步采用，它可以与任何其他有效的 Vue API 语法一起使用。