【Vue2】vue2中自定义组件实现双向绑定的写法，v-model在自定义组件中的实现

最新推荐文章于 2024-06-09 22:12:03 发布

卸载引擎

最新推荐文章于 2024-06-09 22:12:03 发布

阅读量1.4k

点赞数 13

分类专栏： vue 文章标签：前端 javascript vue2

本文链接：https://blog.csdn.net/weixin_42960907/article/details/136561866

版权

vue 专栏收录该内容

23 篇文章 3 订阅

订阅专栏

本文介绍了在Vue中如何在父组件与子组件间使用双向数据绑定，通过`v-model`和`sync`修饰符，以及在子组件中处理prop和watch的实例，展示了如何在`modelValue`属性上实现数据的实时更新。

摘要由CSDN通过智能技术生成

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

一、讲解示例

父组件中使用子组件

<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>