typescript - 如何使用 typescript 在 vue 类样式组件中双向绑定(bind) v-model 对象

Question

我想在 vue cli 中创建一个自定义组件，我可以在其中使用 v-model 将值(或对象)传递给我的组件。据我了解，当我使用 v-model 进行绑定(bind)时，我可以更新父级中传递的值。您可以勾选复选框或单击按钮将值设置为 true。

在应用程序代码中:

 <test v-model="content"></test>
    <br />
    selected: {{content}}

测试组件:

<template>
  <div>
    <v-text-field label="Regular" v-model="checkval" disabled></v-text-field>
    <input
      type="checkbox"
      v-bind:checked="checkval"
      v-on:change="$emit('change', $event.target.checked)"
    />
    <v-btn @click="$emit('change', true)">Make true</v-btn>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Model, Prop } from "vue-property-decorator";
@Component({
  model: {
    prop: "checkval",
    event: "change"
  },
  props: {
    checkval: Boolean
  }
})
export default class test extends Vue {}
</script>

现在我想进行下一步并将我的组件实现为“ class style”并双向绑定(bind)一个对象。我尝试了以下操作，但没有奏效(以前的 bool 代码工作正常):

export class myobject {
    checkval!: boolean;
    test!: String;
}

@Component
export default class test extends Vue {
    @Prop() checkval: Boolean = false;
    @Model() model: myobject = {
        checkval: true,
        test: "checkval"
    };
}

现在我的问题:

绑定(bind)对象时我将如何执行此操作？

有没有一种方法我不必使用 Emit只需设置变量，如 checkval = true或 model.checkval = true ?

当我必须使用 Emit ，正确的代码将如何查找按钮，例如<v-btn @click="$emit('change', {...this.model, checkval: true})"> ?

Answer 1

我遇到了同样的问题，终于在 vue-property-decorator github 上找到了答案。 :

@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {}) 装饰器

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

@Component
export default class YourComponent extends Vue {
  @Model('change', { type: Boolean }) readonly checked!: boolean
}

相当于

export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: {
      type: Boolean
    }
  }
}

@Model 属性还可以通过反射元数据从其类型定义中设置类型属性。