vue中v-model使用
v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:
1. v-bind绑定一个value属性
2. v-on指令给当前元素绑定input事件
自定义组件使用v-model,应该有以下操作:
-
接收一个value prop
-
触发input事件,并传入新值
一般来说我们用v-model是在input中 常见用法如下:
<input v-model="inputValue">
其实v-model是一种语法糖,v-model 上面的语句其本质相当于下面的写法:
<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">
其实我们的自定义组件也是可以实现v-model的,它默认用的属性就是value,事件名为input
下面是一个图片上传的案例,UploadImg是一个自定义组件。
父组件
v-model绑定值
<el-form-item label="员工头像">
<!-- 放置上传图片 -->
<UploadImg v-model="userInfo.staffPhoto" />
</el-form-item>
upload-img: 自定义的组件, v-model:双向绑定。
子组件(图片上传组件)
- 定义props value来接收父组件传入的图片地址
props: {
// 父组件传递过来的v-model对应的值
value: {
type: String, default: '' }
},
- 直接用value来显示图片
<img :src="value" />
- 在子组件图片上传成功之后,this.$emit(‘input’, 新地址), 抛给父组件,达到更新父组件中v-model绑定数据项
const imageUrl = `https://${
data.Location}`
this.$emit('input', imageUrl)