如何使用打字稿在 vue class 样式组件中双向绑定 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>

现在我想进行下一步并将我的组件实现为“class style”并双向绑定一个对象。我尝试了以下方法，但没有用（之前使用布尔值的代码运行良好）：

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

现在我的问题：

绑定对象时我该怎么做？
有没有一种方法我不必使用 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) = {}) decorator

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 从其类型定义中设置类型属性 .

如何使用打字稿在 vue class 样式组件中双向绑定 v-model 对象

How to two-way bind v-model object in vue class style component with typescript

typescript

vue.js

vue-cli