【笔记】vue父子组件数据双向绑定（v-model、prop.aync）

Vue自定义组件v-model详解：同步与多绑定

原创已于 2023-05-12 19:04:12 修改 · 2.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2021-08-27 10:50:50 首次发布

本文详细介绍了如何在Vue自定义组件中使用v-model，包括简写法、自定义属性名、多绑定以及.sync修饰符的应用。重点讲解了组件间的双向数据绑定和解决多组件同步问题的方法。

文章目录

一、v-model
二、.sync

[自定义组件的 v-model — Vue.js 中文文档]：(https://vuejs.bootcss.com/guide/components-custom-events.html#自定义组件的-v-model)
[.sync 修饰符 — Vue.js 中文文档]：(https://vuejs.bootcss.com/guide/components-custom-events.html#sync修饰符)

一、v-model

v-model 一般是在表单控件使用，不过这里我们要用在自定义组件中，由于文档中的例子是封装表单控件，我刚见到这种用法时有些疑惑，只能用在表单控件吗？其实不然：

1.最简写法

子组件：

props: {
  value: {
  	type: Array,
  	default: () => []
  }
},
watch: {
  value() {
	this.$emit('input', this.value)
  }
},
methods: {
  handleClose() {
	this.$emit('input', this.value)
  }
}

父组件：

<custom-form v-model="data"></custom-form>

默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。

2.可自定义属性名的写法(2.2.0+)

子组件：

model: {
  prop: 'formData',
  event: 'handleClose'
},
props: {
  formData: {
  	type: Array,
  	default: () => []
  }
},
watch: {
  formData: {
	handler: function() {
		this.$emit('handleClose', this.formData)
	}
  }
},
methods: {
  handleClose() {
	this.$emit('handleClose', this.formData)
  }
}

父组件：

<custom-form v-model="formData"></custom-form>

重点：

model.event的值必须与$emit第一个参数的值等
$emit既可以通过watch或钩子函数触发，也可以通过dom事件触发，无限制

3.多绑

vue3现在支持多绑，需要多个绑定的话可以这样用的：

子组件：

props: {
  formData: {
  	type: Array,
  	default: () => []
  },
  tableData: {
  	type: Array,
  	default: () => []
  }
},
watch: {
  formData() {
    this.$emit('update:formData', this.formData)
	this.$emit('update:tableData', this.tableData)
  }
},
methods: {
  handleClose() {
	this.$emit('update:formData', this.formData)
	this.$emit('update:tableData', this.tableData)
  }
}

父组件：

<custom-form v-model:formData="formData" v-model:tableData="tableData"></custom-form>

二、.sync

vue3之前，一个组件只能有一个v-model，因此还有其他需要双绑的，使用.sync:：

子组件：

props: {
  formData: {
  	type: Array,
  	default: () => []
  }
},
watch: {
  formData() {
	this.$emit('update:formData', this.formData)
  }
},
methods: {
  handleClose() {
	this.$emit('update:formData', this.formData)
  }
}

父组件：

<custom-form :formData.sync="formData"></custom-form>

参考文章：

[在组件上使用 v-model_前端精髓]：(https://blog.csdn.net/wu_xianqiang/article/details/82115598)
[Vue 项目里戳中你痛点的问题及解决办法]：(https://juejin.cn/post/6844903632815521799)
[vue在自定义组件中使用v-model]：(https://www.imooc.com/article/details/id/294534)