Vue数据双向绑定.sync 和v-model

结论：
.sync 和v-model两者的本质都是语法糖，
目的都是实现组件与外部数据的双向绑定。
v-model 是 .sync的一种体现。.sync 比较灵活;v-model较单一

.sync修饰符

父组件

<comp :foo.sync="bar" ></comp>// 等价于, 组件属性名称一致,默认事件update
<comp :foo="bar" @update:foo="val => bar = val"></comp>

子组件代码

<input :value="foo" @change="$emit("update:foo", $event.target.value)">

v-model

父组件

<input v-model="something" />// 等价于, 默认prop是value, 默认行为是input
<input v-bind:value="something" v-on:input="something = arguments[0]"/>

子组件

<input :value="value" @input="$emit('input', $event.target.value)">

可以修改默认行为

model: {prop: 'checked',event: 'change'
}

v-model实例

app.vue

<template><div><p>父组件：{{value}}</p><child v-model="value"/><!-- 两者等效value, input --><child v-bind:value="value" v-on:input="value = arguments[0]" /></div>
</template><script>
import child from './Child.vue';export default {components:{child},data(){return {value: ""}}
}
</script>

Child.vue

<template><div>子组件：<input type="text" :value="value" @input="$emit('input', $event.target.value)" /></div>
</template><script>
export default {props: ["value"]
};
</script>

运行 vue serve app.vue

修改子组件Child.vue中 model对应的属性和事件，
属性修改为： foo
事件修改为：change

<template><div>子组件：<input type="text" :value="foo" @input="$emit('change', $event.target.value)" /></div>
</template><script>
export default {props: ["foo"],model:{props: "foo",event: "change"}
};
</script>

父组件app.vue 需要修改为

<!-- v-model写法不用变 -->
<child v-model="value"/><!-- 两者等效，需要修改下面的代码 --><child v-bind:foo="value" v-on:change="value = arguments[0]" />

.sync实例

app.vue

<template><div><p>父组件：{{value}}</p><child :foo.sync="value"/><!-- 两者等效 --><child v-bind:foo="value" v-on:update:foo="val => foo = value" /></div>
</template><script>
import child from './Child.vue';export default {components:{child},data(){return {value: ""}}
}
</script>

<template><div>子组件：<input type="text" :value="foo" @input="$emit('update:foo', $event.target.value)" /></div>
</template><script>
export default {props: ["foo"]
};
</script>

同样实现了v-model的效果

参考
Vue中.sync和v-model的区别
什么时候用组件的.sync修饰符，什么时候用自定义组件的v-model，两者有什么区别？

Vue数据双向绑定.sync 和v-model相关推荐

西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
vue数据双向绑定的原理
vue数据双向绑定的原理一复习闭包 1 闭包含义: 当函数嵌套时,内部函数使用了外部函数的变量,就会产生闭包当函数可以记住并访问自己的作用域时,就会产生闭包 2 闭包注意点 ① 队列里的代码执行 ...
小猿圈解析vue数据双向绑定的缺点
vue是当今前端很流行的一种框架,但是vue也是有一定的缺陷的,你有过了解吗?下面小猿圈web前端老师就为你解析一下vue数据双向绑定的缺陷,希望对你有所帮助,下面我们一起了解一下吧. 1.vue 实 ...
Vue 数据双向绑定
1. 前言本小节我们将介绍 Vue 中数据的双向绑定指令 v-model.v-model 的学习相对简单我们可以用 v-model 指令在表单 . 及元素上创建双向数据绑定.它会根据控件类型自动 ...
this指向-作用域、作用域链-预解析变量提升-Vue组件传值父子子父非父子-Vue数据双向绑定原理
目录 this指向作用域.作用域链预解析变量提升 Vue组件传值父子子父非父子 Vue数据双向绑定原理 1.this指向函数的this指向看调用.不看声明 (1)普通函数调用 ①函数名 ...
Vue数据双向绑定原理（vue2向vue3的过渡）
众所周知,Vue的两大重要概念: 数据驱动组件系统接下来我们浅析数据双向绑定的原理一.vue2 1.认识defineProperty vue2中的双向绑定是基于defineProperty的ge ...
vue数据双向绑定原理
vue 双向绑定原理官网–https://cn.vuejs.org/v2/guide/reactivity.html 1.vue双向数据绑定是通过数据劫持并结合发布-订阅模式的方法来实现的 ...
vue组件双向绑定.sync修饰符的一个坑
我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的.... 在编程的时候我们很习惯冒号后面跟着空格.而.sync双向绑定需要 ...
利用Object.defineProperty实现Vue数据双向绑定
body部分很简单,一个输入框和一个展示的div <div><p>你好,<input id='nickName'></p><div id=&quo ...