Vue models, v-model, allow us to use two-way data binding, which is useful in some cases such as forms. This lesson shows how to use it by creating a custom checkbox component using the @Model decorator in TypeScript.
Checkbox:
<template>
<div>
<input type="checkbox" :id="id" :checked=checked @change="changed"/> {{label}}
</div>
</template>
<script lang="ts">
import Vue from ‘vue‘
import { Component, Prop, Model } from ‘vue-property-decorator‘
@Component
export default class MyCheckbox extends Vue {
@Prop() label: string
@Prop() id: string
@Prop()
@Model(‘change‘) checked: boolean
changed(ev) {
this.$emit(‘change‘, ev.target.checked)
}
}
</script>
Parent Component:
<template>
<div>
<MyCheckbox :label="checkbox.label" :id="checkbox.id" v-model="checkbox.checked"/>
{{JSON.stringify(checkbox)}}
</div>
</template>
<script lang="ts">
import Vue from ‘vue‘
import {Component} from ‘vue-property-decorator‘
import MyCheckbox from ‘./MyCheckBox.vue‘
@Component({
components: {
MyCheckbox
}
})
export default class HelloTs extends Vue {
checkbox = {
label: ‘Fancy checkbox‘,
id: ‘checkbox-id‘,
checked: true
}
}
</script>
[Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript
原文：http://www.cnblogs.com/Answer1215/p/7517612.html