v-model 单选框,复选框,下拉框的综合案例
- 有经验的前端不会写label for
确保子组件传递的是 e.target.value 而不是 e
- 如果你要用
v-model="value"或者是v-bind:value.sync="value"的写法 - 确保子组件传递的是
e.target.value而不是e - 因为这两者本质是 语法糖, 都替代了以下的写法
@input = "value = $event"
@change = "value = $event"
@update:value = "value = $event"
如果你传递的是 `e`, 结果就是打印出 `[object InputEvent]`, 即输入类型的事件对象
v-model 根据不同的表单元素选择监听input事件/change事件
v-model用于input输入框时，v-model监听的是input事件;
v-model用于单选框/复选框/下拉框时，v-model监听的是change事件 三个v-model修饰符.lazy.trim.number
v-model的原理是监听了input事件，input事件会触发相当频繁因此v-model才会如此响应快速- .lazy 实际上就是更改成
change事件，即等你一次性全部输入完成以后，失焦的时候我再给你响应 - .number 的作用是，当你输入的是'abcde...'时，类型保持
string,而当你输入的是纯数字时就给你转成number类型
总结一下
v-model的原理，即等价写法， 下面的 Child 组件 是一个带有 input框 的子组件
在父组件template中使用Child组件时
<Child v-model="inputValue" /> ===> <Child :value="inputValue" @input="inputValue = $event" />
<Child v-model="value" /> ===> <Child :value="value" @input="value = $event" />
.sync修饰符
.sync用于修改父组件数组的时候，需要展开运算符
this.$emit('update:dataSource',[...this.dataSource,tagName])
把原来传来的prop数组展开，再把新的一项放进去
.sync作用是省略了父组件中的这句话:v-on:update:propName="propName=$event"
简化了 常见的子组件修改父组件data这样的被称之为发布订阅模式
如果不用.sync 子组件修改父组件 data 流程如下:
由于这种
发布订阅模式太过常用了，现在将这种套路归纳成.sync修饰符
- 自定义事件名必须为
update:propName比如update:money - 此外，父组件模板中使用子组件位置处需将所传的prop改写为
prop.sync比如:money.sync
另外一种写法
使用了 .sync
<comp :foo.sync="bar"></comp>
未使用 .sync 这里可以不用$event而是用函数形式
<comp :foo="bar" @update:foo="val => bar = val"></comp>
this.$emit
在线示例，没必要把父data传过去即可让子组件改变父data
子组件中触发父组件身上的
this.$emit('update:foo', newValue)
