vue 自定义组件实现双向绑定
因为开发一个图片上传组件,想到实现双向绑定更为方便,所以就研究了一下,下面是具体实现
vue中对于v-model的解释: v-model
本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。v-model
会忽略所有表单元素的 value
、checked
、selected
特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data
选项中声明初始值。
所以v-model其实只是将值绑定到value属性上,同时当组件触发input时用参数覆盖value属性,从而实现双向绑定。
所以当我们自定义组件要实现双向绑定,只要在自定义组件中引入value的props,同时当需要改变value时抛出input事件
<pro-img-uploader v-model="imgUrl" title="图片"></pro-img-uploader>
//ProImgUploader.vue
export default {
name: "ProImgUploader",
props: [
'value',//绑定上传图片的值
],
methods: {
upload() {
this.$http.post(....).then((r)=> {
....
this.$emit('input', r.imgUrl); //抛出input事件修改value
})
}
}
因为当前组件内并没有原生的input事件所以我们需要自己手动抛出事件,当内部有类似与输入框的元素时,可以直接抛出input事件,类似于官方文档的例子
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})