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)"
    >
  `
})