v-model一般用于input标签的值绑定和值变化通知
<input type="text" v-model="val" > 等价<input type="text" :value="val" :input="$emit('change', data)">
<template>
<div>
<div>输入值：{{val}}</div>
<input type="text" v-model="val" placeholder="请输入">
</div>
</template>
<script>
import eInput from "./c-input.vue"
export default {
data() {
return {
val:'初始值'
}
},
}
</script>
<style>
</style>
自定义显示v-model组件功能
父组件
<template>
<div>
<div>输入值：{{val}}</div>
<e-input :value="val" @change="onChange"></e-input>
</div>
</template>
<script>
import eInput from "./c-input.vue"
export default {
components: {
eInput
},
data() {
return {
val:''
}
},
methods: {
onChange(e) {
this.val = e
}
},
}
</script>
<style>
</style>
子组件
方式一：
<template>
<div>
<input type="text" class="form-control" :value="val" @input="onChange">
</div>
</template>
<script>
export default {
props:['val'],
methods:{
onChange(e){
this.$emit('change', e.target.value)
}
}
}
</script>
方式二：
<template>
<div>
<input type="text" class="form-control" :value="val" @input="$emit('change', $event.target.value)">
</div>
</template>
<script>
export default {
props:['val'],
}
</script>
<style>
</style>
方式三：
子组件
<template>
<div>
<input type="text" class="form-control" :value="val" @input="changeInput">
</div>
</template>
<script>
export default {
props:['val'],
model: {
prop: 'val',
event: 'change'
},
methods:{
changeInput(e){
this.$emit('change', e.target.value)
}
}
}
</script>
<style>
</style>
父组件
<e-input v-model="val"></e-input>
总结
<e-input v-model="val"></e-input>等价<e-input :value="val" @change="onChange"></e-input>
