重点
首先我们要明白 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 框实现的效果
