封装一些小组件的时候常常会用到双向数据绑定，下面简单总结一下用法

一、讲解示例

父组件中使用子组件

<template>
  <div>
    <子组件 :对外双向绑定属性名.sync="父组件双向绑定属性名" />
  </div>
</template>
<script>
export default {
  data() {
	return {
		父组件双向绑定属性名: '',
	}
  }
}
</script>

子组件中封装逻辑

<template>
  <div>
    <div v-model="_双向绑定内部过渡属性名"/>
  </div>
</template>
 
<script>
//子组件    
export default {
  data() {
    return {
      _双向绑定内部过渡属性名: "", //中间过渡变量，避免报错referenced during render
    };
  },
  props: ["对外双向绑定属性名"],
  watch: {
    对外双向绑定属性名: {
      handler(newData) {
        this._双向绑定内部过渡属性名 = newData;
      },
      deep: true,
      immediate: true,
    },
    _双向绑定内部过渡属性名(newData) {
      this.$emit(`update:对外双向绑定属性名`, newData);
    },
  },
};
</script>

组件属性双向数据绑定-官方文档

二、实际示例

父组件使用

<customUpload 
 	:modelValue.sync="imagePath" 
 	uploadText="每张最大为8M"
	fileStorageLocation="wxInspection" 
	:showChoosePhoto="false">
</customUpload>

子组件中定义

<template>
  <div>
    <div v-model="_双向绑定内部过渡属性名"/>
  </div>
</template>
 
<script>
//子组件    
export default {
  data() {
    return {
      fileList: [], // 对内：上传的文件列表 {status:success|uploading|fail, url:''}
    };
  },
  props: {
  	// 对外：上传的文件列表 {status:success|uploading|fail, url:''}
	modelValue: {
		type: Array,
		default: () => []
	},
  },
  watch: {
    modelValue: {
		handler: function(newData, oldData) {
			this.fileList = newData;
		},
		immediate: true,
		deep: true
	},
   // 监听文件列表数据长度变化，存在数据则显示预览
	fileList(newData, oldData) {
		this.$emit('update:modelValue', newData);
		this.previewImage = newData.length ? true : false;
	},
  },
};
</script>