在平常的开发中一般v-model是绑定在input框或者textarea上的。但是在element ui框架中像el-input这样的组件可以直接v-model绑定数据。
<ListItem v-model="value"> <div slot="slot1">你好1</div> <div slot="slot2">你好2</div> <div slot="slot3">你好3</div> </ListItem> <template> <div class='list'> <!-- $emit必须是input还有change --> <input type="text" :value="value" @input="$emit('input',$event.target.value)"> </div> </template> <script> export default { props: ['value'] } </script>
在子组件的input框中$emit发送的方法名要和原生input框的类似input或者change方法名一样,这样就可以实现自定义组件绑定v-model了。
其实子组件发送出来的这个方法名是vue组件上默认的方法名,如果有额外的操作我们采取@这个方法名,默认是不执行任何操作。