目录
- 自定义组件的 v-model
- v-model简化代码
自定义组件的 v-model
- 组件上的
v-model默认会利用名为value的prop和名为input的事件。
<input v-model="parentData">
等价于：
<input :value="parentData"@input="parentData = $event.target.value"
>
-
作用：提供数据的双向绑定
- 数据变，视图跟着变：
value - 视图变，数据跟着变：
@input
- 数据变，视图跟着变：
-
注意：$event 用于在模板中，获取事件的形参
v-model简化代码
-
目标：父组件通过v-model 简化代码，实现子组件和父组件数据双向绑定
-
简化：v-model其实就是：
value和@input事件的简写- 子组件：
props通过value接收数据，事件触发input - 父组件：
v-model直接绑定数据
- 子组件：
-
示例
- 子组件
<select :value="value" @change="handleChange">...</select>props: {value: String},methods: {handleChange (e) {this.$emit('input', e.target.value)}}
- 父组件
<BaseSelect v-model="selectId"></BaseSelect>
