Class5 v-model使用和实现

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>