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

Question

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

现在我想继续下一步，将我的组件实现为“类样式”并双向绑定一个对象。我尝试了以下操作，但这不起作用（之前使用布尔值的代码工作正常）：

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"
    };
}

现在我的问题是：

1. 绑定对象时我该怎么做？
2. 有没有一种方法我不必使用Emit而只需设置变量，如checkval = trueor model.checkval = true？
3. 当我必须使用 时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 属性还可以通过reflect-metadata 从其类型定义中设置类型属性。