vue自定义组件v-model

功能实现

在自定义组件上实现v-model双向绑定

vue2.x

子组件

    <input type="text" :value="value" @input="valueChange">
</template>
<script>
export default {
    name:'inputDome',
    props:{
        value:{
            type:String,
            default:""
        }
    },
    methods:{
        valueChange(val){
            this.$emit('input',val.target.value)
        }
    }
}
</script>

父组件

<pt-input v-model="value"></pt-input>

~
components:{
        ptInput
    },
~

vue3.x

子组件

<template>
    <input 
        :type="type" 
        :value="modelValue" 
        @input="observerInput"
        :placeholder="placeholder"
    >
</template>
 
<script>
  export default {
    name:'ptInput',
    props:{
        modelValue:{
            type:[String,Number],
            default:''
        },
        type:{
            type:String,
            default:'text'
        },
        placeholder:{
            type:String,
            default:"请输入"
        }
    },
    data(){
        return{
        
        }
    },
    methods: {      
      // 拦截内置事件      
      observerInput (el) {
        this.$emit('update:modelValue', el.target.value)
      },
    },  
  }
</script>

父组件

 <pt-input placeholder="请输入文字" v-model="bar"></pt-input>
 ~