Question

我想在vue cli中创建一个自定义组件，在这里我可以使用v模型将值（或对象）传递给我的组件。据我了解，当我使用v模型进行绑定时，我可以更新父级中传递的值。您可以勾选复选框或单击按钮将值设置为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”，并双向绑定一个对象。我尝试了以下操作，但是没有用（先前使用Boolean的代码工作正常）：

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 ?:字符串，选项：（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属性还可以通过反射元数据从其类型定义中设置type属性。

如何使用typescript

1 个答案: