<elInput v-model="inputData"/>
相当于
<elInput :inputValue="inputData" @setValue="val => inputData=val"/>
在elInput中可以通过modal来设置要传给组件的属性和方法的名字
elInput.vue组件内容:
<template> <div> <input :value="inputValue" @input="setInput" /> </div> </template> <script> export default { model: { prop: 'inputValue', event: 'setValue' }, props: { inputValue: { type: String, default: '' } }, methods: { setInput(e) { this.$emit('setValue', e.target.value) } } } </script>
因此可以看出v-modal是一个的语法糖
v-model
在内部为不同的输入元素使用不同的属性并抛出不同的事件:
- text 和 textarea 标签使用
value
属性和input
事件; - checkbox 和 radio 标签使用
checked
属性和change
事件; - select 标签使用
value属性和
change
作为事件。