vue2封装input 组件（输入的双向绑定）

重点

首先我们要明白 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>

下面就是自己封装input 框实现的效果