vue2封装input 组件（输入的双向绑定）_完成input标签的封装要求:提供title modelvalue两个属性-CSDN博客

本文链接：https://blog.csdn.net/qq_40259123/article/details/123670274

本文详细解析Vue.js中v-model的工作机制，通过实例展示了它如何同时完成值的绑定和变更监听。并介绍了如何在自定义组件中使用v-model，通过子组件的$emit('input', value)实现值的传递。示例包括父组件和子组件的代码实现，展示了一个封装的input组件效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重点

首先我们要明白 vue中v-modle 的对于input 做了什么

	<input type="text" v-model="username">
    <input type="text" :value="username" @input="username = $event.target.value">

以上的两行代码，所呈现的效果是一样的。也就是说: v-model=“username” 在input中做了两件事情。

:value 绑定了值
@input=“username = $event.target.value” 监听了值的改变

代码示例：

父组件

<template>
  <div id="app">
    <lj-input placeholder="请输入" v-model="username"></lj-input>
    <div>{{username}}</div>
  </div>
</template>

<script>
import ljInput from './components/inputCom/LjInput.vue'
export default {
  name: 'App',
  components: {
    ljInput
  },
  data(){
    return{
      username:'',
    }
  },
  methods: {
  }
}
</script>

子组件

<template>
  <div class="lj-input">
    <input :class="{'is-disabled':disabled}"  
    :placeholder="placeholder" 
    :type="type" 
    :disabled ='disabled'
    :value="value"
    @input="handleInput"
    >
  </div>
</template>

<script>
export default {
  name:'ljInput',
  props: {
    placeholder:{
      type:String,
      default:'' 
    },
    type:{
      type:String,
      default:''
    },
    disabled:{
      type:Boolean,
      default:false
    },
    value:{
      type:String,
      default:''
    }
  },
  methods:{
    handleInput(e){
   	 // 这句代码是关键
      this.$emit('input',e.target.value) 
    }
  }
}
</script>

<style>
  .is-disabled{
      cursor: not-allowed;
  }
</style>