基本用法
v-model 可以在组件上使用以实现双向绑定。
首先看下 v-model 在原生元素上的用法：
<input v-model="searchText" />在代码背后，模板编译器会对 v-model 进行更冗长的等价展开。因此上面的代码其实等价于下面这段：
<input:value="searchText"@input="searchText = $event.target.value"
/>而当使用在一个组件上时，v-model 会被展开为如下的形式：
<CustomInput:model-value="searchText"@update:model-value="newValue => searchText = newValue"
/>要让这个例子实际工作起来，<CustomInput>组件内部需要做两件事：
1、将内部原生<input>元素的 value attribute 绑定到 modelValue prop。
2、当原生的 input 事件触发时，触发一个携带了新值的 update:modelValue 自定义事件。
<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>父类代码：
<script>
import CustomInput from './CustomInput.vue'export default {components: { CustomInput },data() {return {message: 'hello'}}
}
</script><template><CustomInput v-model="message" /> {{ message }}
</template>另一种在组件内实现 v-model 的方式是使用一个可写的，同时具有 getter 和 setter 的 computed 属性。get 方法需返回 modelValue prop，而 set 方法需触发相应的事件：
<!-- CustomInput.vue -->
<script>
export default {props: ['modelValue'],emits: ['update:modelValue'],computed: {value: {get() {return this.modelValue},set(value) {this.$emit('update:modelValue', value)}}}
}
</script><template><input v-model="value" />
</template>