爱学习IT200.cn双向绑定的作用就是保证输入的内容与声明的响应式变量可以实时同步，在 Vuejs 中双向绑定常体现在表单的处理上，如：input、select、textarea。
在自定义组件中实现双向绑定必须要声明自定义组件的属性 props 和对应处理的事件 emits，下面在摘自 Vuejs 网站的部分代码：
vue
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue']
}
</script>
<template>
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
</template><script>
export default {
props: ['modelValue'],
emits: ['update:modelValue']
}
</script>
<template>
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
</template>vue
<CustomInput v-model="searchText" /><CustomInput v-model="searchText" />在类组件中可以通过 @Model 装饰器来替换上面这段比较繁琐的代码：
vue
<script lang="ts">
import { Component, Model, Vue } from 'vue-facing-decorator'
@Component
export default class CustomInput extends Vue {
@Model
inputValue!: string = '';
}
</script>
<template>
Input：<input v-model="inputValue" >
</template><script lang="ts">
import { Component, Model, Vue } from 'vue-facing-decorator'
@Component
export default class CustomInput extends Vue {
@Model
inputValue!: string = '';
}
</script>
<template>
Input：<input v-model="inputValue" >
</template>html
<CustomInput v-model:modelValue="text"></CustomInput><CustomInput v-model:modelValue="text"></CustomInput>@Model 装饰器提供与 Prop 几乎一样的选项支持，额外的 name 选项默认的值是 modelValue，在对其进行修改时要注意类组件中属性声明禁止重复。