我想在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>
现在，我想继续下一步，将我的组件实现为“类样式”，并双向绑定一个对象。我尝试了以下操作，但是没有用（以前的布尔代码很好用）：
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和只需将变量设置为likecheckval = true或model.checkval = true？Emit，正确的代码将如何查找按钮，例如<v-btn @click="$emit('change', {...this.model, checkval: true})">？我遇到了同样的问题，最后在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属性还可以通过reflect-metadata从其类型定义中设置type属性。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句