文章目录

一、v-model
- 1.最简写法
- 2.可自定义属性名的写法(2.2.0+)
- 3.多绑
二、.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)

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

vue自定义组件数据双向绑定，获取vue自定义组件input框输入的值
1.首先创建一个自定义组件 Vue.component('test-component',{template:`<div id="el"><input @inpu ...
vue 父子组件传值双向绑定
父组件: <template> //:content , @content 中的:@一个是v-bind 一个是v-on的写法. //:content="detail" ...
vue中通过数据双向绑定给video标签的src赋值，只有第一次有效，怎么解决？
场景:在一个视频列表页面,点击视频列表,则全屏播放视频.全屏播放是一个公用组件,每次点击视频列表则把该视频的播放地址通过vue的数据双向绑定到组件中的video标签,如下: <video con ...
vue 自定义组件 v-model双向绑定、父子组件同步通信
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
vue自定义组件实现双向绑定
场景: 我们比较常用的父子组件之间的交互方式: 父组件通过props将数据流入到子组件: 子组件通过$emit将更新后的数组发送的父组件: 今天,我们通过另一种方式实现交互,参考input框的v-mo ...
Vue实现组件props双向绑定解决方案
注意: 子组件不能直接修改prop过来的数据,会报错方案一: 用data对象中创建一个props属性的副本 watch props属性赋予data副本来同步组件外对props的修改 watch ...
【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...
西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
数据双向绑定_手把手教你用JavaScript如何实现数据双向绑定
近几年前端技术栈真是发展的太迅速了,从以前的针对dom操作的框架如jquery,ext.js等框架逐步过渡到当前的mvvm模式,让前端开发者将注意力从dom操作逐渐解脱出来,专注于逻辑的实现,个人认为 ...

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

文章目录

一、v-model

1.最简写法

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

3.多绑

二、.sync

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

最新文章

热门文章