vue2 在自定子组件上使用v-model实现element-ui的输入框

 parent 父组件

<template>
    <div>
        <!-- 通过v-model把值传给子组件 -->
        <child v-model="inputVal"></child>
    </div>
</template>

<script>
import Child from './components/child.vue'

export default {
    components: {
        Child,
    },
    data() {
        return {
            // 父组件的值
            inputVal: '',
        }
    },
    watch: {
        // 监听父组件的值
        inputVal(e) {
            console.log('父组件的值', e)
        },
    },
}
</script>

<style>
</style>

 child 子组件

<template>
    <div>
        <input type="text" v-model="childVal" @input="inputChange">
    </div>
</template>

<script>
export default {
    props: {
        // 子组件接收值
        // 必须要使用value
        value: { type: String, default: '' },
    },
    data() {
        return {
            childVal: this.value,
        }
    },
    methods: {
        inputChange(e) {
            console.log('子组件的值', e)
            this.$emit('input', e.target.value) // 这儿必须用input 发送数据，发送的数据会被父级v-model="inputVal"接收到，再被value=inputVal传回来。
        },
    },
}
</script>