Preface

The first time I met .sync modifier, I didn't know it very well. So, I seldom use that. Today, I am going to get it.

Main

In the past, I use “two-way binding” like this:

```<div class="app" id="app">
<button-counter :child-count="parCount" @add="add"></button-counter>
<p>parent component {{parCount}}</p>
</div>
```


let app = new Vue({
el: '#app',
data: {
parCount: 0
},
methods: {
add() {
this.parCount++
}
},
components: {
'button-counter': {
template:
'&lt;button @click="add"&gt;You clicked me {{ childCount }} times.&lt;/button&gt;',
props: ['childCount'],
methods: {
add() {
this.$emit('add')
}
}
}
}
})

It was easy to understand except a little inconvenient. I need to listen and handle event in child and parent component. Also

true two-way binding can create maintenance issues, because child components can mutate the parent without the source of that mutation being obvious in both the parent and the child.

So, Vue recommends emitting events in the pattern of update:myPropName. For example:

```<div class="app" id="app">
<button-counter :child-count="parCount" @update:child-count="parCount=$event"></button-counter>
<p>parent component {{parCount}}</p>
</div>
```


let app = new Vue({
el: '#app',
data: {
parCount: 0
},
methods: {},
components: {
'button-counter': {
template:
'&lt;button @click="add"&gt;You clicked me {{ childCount }} times.&lt;/button&gt;',
props: ['childCount'],
methods: {
add() {
this.$emit('update:child-count', this.childCount + 1) // child-count is right while childCount won't work
}
}
}
}
})

See? In this case, we don't have to add event callback in parent component because vue have done that. And this is the principle of .sync. For convenience, Vue offers a shorthand for this pattern with the .sync modifier which would make the code above like:

```<div class="app" id="app">
<button-counter :child-count.sync="parCount"></button-counter>
<p>parent component {{parCount}}</p>
</div>
```


let app = new Vue({
el: '#app',
data: {
parCount: 0
},
methods: {},
components: {
'button-counter': {
template:
'&lt;button @click="add"&gt;You clicked me {{ childCount }} times.&lt;/button&gt;',
props: ['childCount'],
methods: {
add() {
this.$emit('update:childCount', this.childCount + 1) // childCount is right while child-count won't work
}
}
}
}
})

Also,

The .sync modifier can also be used with v-bind when using an object to set multiple props at once:

```<text-document v-bind.sync="doc"></text-document>
```

This passes each property in the doc object (e.g. title) as an individual prop, then adds v-on update listeners for each one.

For more information, go Vue.js

Original Post

原文地址:https://segmentfault.com/a/1190000017107941

Understand .sync in Vue的更多相关文章

  1. 深入理解vue 修饰符sync【 vue sync修饰符示例】

    在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync .但是在 2.0 发 ...

  2. Vue 开发技巧或者说Vue知识点梳理(转,自个学习)

    Vue 组件通讯 ——常见使用场景可以分为三类: 父子通信: 父向子传递数据是通过 props,子向父是通过 events($emit):通过父链 / 子链也可以通信($parent / $child ...

  3. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  4. vue学习:props,scope,slot,ref,is,slot,sync等知识点

    1.ref :为子组件指定一个索引 ID,给元素或者组件注册引用信息.refs是一个对象,包含所有的ref组件. <div id="parent"> <user- ...

  5. 理解vue 修饰符sync

    也是在vux中看到了这个sync 现在我们来看看vue中的sync 我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移 ...

  6. vue 之 .sync 修饰符

    在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...

  7. vue中.sync 修饰符

    一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”. 正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是 ...

  8. Vue自定义指令,ref ,sync,slot

    一.自定义指令 vue中可以自己设置指令,通过directive来实现,有2种创建方式,一种是局部创建,一种是全局创建. 第一种:局部创建 如果想注册局部指令,组件中也接受一个 directives  ...

  9. Vue sync修饰符的使用

    父子组件传值,父组件可以给子组件传值,但是子组件是不能修改组件提供的值,这里vue提供了sync修饰符,以前父组件点击子组件显示,子组件关闭按钮,父组件再点击子组件就无法让子组件显示.因为子组件点击关 ...

随机推荐

  1. java 8 LocalDateTime 20 例

    http://www.importnew.com/15637.html 伴随lambda表达式.streams以及一系列小优化,Java 8 推出了全新的日期时间API,在教程中我们将通过一些简单的实 ...

  2. jenkins的Pipeline代码流水线管理

    1.新建一个pipline任务 2.自写一个简单的pipline脚本 a.Pipeline的脚本语法在Pipeline Syntax中,片段生成器,示例步骤中选择builf:Build a job b ...

  3. Netty-----初探

    今天看gateway 实现的时候看到个哥们基于的netty实现的gateway.so,解析一下Netty. 废话少说,maven pom 引入,down 下jar包.看了下netty的包结构,还是挺明 ...

  4. JVM类加载机制————2

    类加载机制的第一个阶段加载做的工作有: 1.通过一个类的全限定名(包名与类名)来获取定义此类的二进制字节流(Class文件).而获取的方式,可以通过jar包.war包.网络中获取.JSP文件生成等方式 ...

  5. 【ActiveMQ】2.spring Boot下使用ActiveMQ

    在spring boot下使用ActiveMQ,需要一下几个条件 1.安装并启动了ActiveMQ,参考:http://www.cnblogs.com/sxdcgaq8080/p/7919489.ht ...

  6. [反汇编练习] 160个CrackMe之036

    [反汇编练习] 160个CrackMe之036. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...

  7. 自己封装的CMusic类 【转】

    http://www.cnblogs.com/zhangminaxiang/archive/2013/02/27/2936011.html 缘由: 在改正俄罗斯方块程序的功能的时候,想给这个程序增加一 ...

  8. 页面登陆框老是乱乱的?banner跨页图片缩小之后总是在側面不能显示主要部分?哈哈~我来帮你忙~~

    有banner背景图片和登陆框的html.css排布 目的:无论页面大小,背景图片都要居中(显示图片中间主要内容,而不是側面的一些东西),登陆框基本能在页面内显示. 盒子的排列应该是这种: <d ...

  9. css3 - 基本选择器

    有人说类选择器最好不要超过三层,其实我也是这样认为的,不是吗? 选择器分为四大类 标签.全选(相对于子类继承了0.1).类.ID 权值分别是:1->0.1->10->100(权值可叠 ...

  10. 几个关于tableView的问题解决方式整合

    近期遇到关于tableView的问题的整合.部分比較白痴.仅仅是初学easy犯~ 1.关于tableView左边空余15像素的问题. 2.关于tableView多余切割线隐藏的问题: 3.关于tabl ...