vue2.0 vue3.0 input组件封装

vue2

<template>//子组件
    <div class='vHeader'>
            <input type="text" :value="modelValue" @input="input">
    </div>
</template>

<script>
export default {
    props:{
        modelValue: String,
    },
    data() {
        return {};
    },
    created() {},
    methods: {
         input(e){
             console.log(e.target.value);
              this.$emit('input',e.target.value);
         }
    },
    components:{}
};
</script>

<style lang='scss'>

</style>

父组件
  <v-header v-model="ipt">
  </v-header>
  
   data() {
        return {
            list:[],
            ipt:''
        };
    },

vue3

子组件：

<input type="text"  @input="input"  :value="modelValue">

<script>
 export default {

props:{
     modelValue:String,
},
setup(props, ctx) {

const input=(e)=>{
          //e是input事件对象
          ctx.emit("update:modelValue",e.target.value);
}

return {input};
 },
 };
</script>



父组件：

<my-input v-model="ipt" @input="input"> 父组件直接写v-model</my-input>
   

最后

以上就是缓慢山水为你收集整理的vue2.0 vue3.0 input组件封装的全部内容，希望文章能够帮你解决vue2.0 vue3.0 input组件封装所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。