v-mdoel是
<input v-bind:value="something" v-on:input="something =$event.target.value">
的语法糖。默认情况下,一个组件的 v-model 会使用 value 属性和 input 事件,但是诸如单选框、复选框之类的输入类型可能把 value 属性用作了别的目的。model 选项可以回避这样的冲突:
参考
输入框:<input v-model="inputValue">
等价于:
<input v-bind:value="inputValue" v-on:input="inputValue=$event.target.value">
在组件中使用input
自写一个v-model
//CustomInput.vue
<template>
<input type="text" :value="value" @input="emitValue($event)">
</template>
<script>
export default{
name:'CustomInput',
props:{
value:{
type:String,
default:''
}
},
methods:{
emitValue(e){
this.$emit('input',e.target.value)
}
}
}
</script>
<style>
</style>
//父组件中使用:searchText是定义在data函数中的
<CustomInput v-model="searchText" ></CustomInput>
{{searchText}}