vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。

不过它有一个前身,先来看看.sync出现之前是如何实现的

父组件中(传递给子组件一个值:propObj)

<template>
<div>
<Lala :propObj="lalala"
v-on:update:propObj="lalala = $event"
></Lala>
</div> </template> <script>
import Lala from '@/components/lala.vue'; export default {
components:{
Lala
},
data(){
return {
lalala:{name:"哈哈"},
}
}
}
</script>

子组件中(点击事件去更新父组件的值)

<template>
<div><el-button @click="dd()">自定义组件内的按钮</el-button>
</div>
</template> <script>
export default {
props:['propObj'],//外部传值
methods:{
dd(){
if(this.propObj.name==2){
this.propObj.name="哈哈";
this.$emit('update:propObj', this.propObj)
}else{
this.propObj.name=2;
this.$emit('update:propObj', this.propObj)
} }
}
}
</script>

下面用vue 修饰符sync来实现,会更简洁

父组件中

<template>
<div>
<Lala v-bind:propObj.sync="lalala"></Lala>
</div> </template> <script>
import Lala from '@/components/lala.vue'; export default {
components:{
Lala
},
data(){
return {
lalala:{name:"哈哈"},
}
}
}
</script>

子组件中保持不变

vue中.sync修饰符,实现子组件实时更新父组件的值的更多相关文章

  1. vue中.sync 修饰符

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

  2. Vue中.sync修饰符

    Vue 中 sync的作用 <FatherComponent :a.sync = 'b'><FatherComponent /> 子组件中emit('update:a',... ...

  3. vue中的修饰符

    Vue2.0学习笔记:Vue事件修饰符的使用   事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理 ...

  4. vue中通过.sync修饰符实现子组件修改父组件数据

    vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...

  5. vue 之 .sync 修饰符

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

  6. vue的.sync 修饰符

    很多时候,我们会对 prop (父子组件传递数据的属性) 进行“双向绑定” 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会 ...

  7. 027——VUE中事件修饰符:stop prevent self capture

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. VUE中事件修饰符:stop prevent self capture

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

随机推荐

  1. MyEclipse 2014 GA 和 MyEclipse 2015 CI 和 Eclipse Luna 最新最全下载地址

    官方下载地址: Eclipse 标准版 x86 http://mirror.hust.edu.cn/eclipse//technology/epp/downloads/release/luna/R/e ...

  2. Android高手进阶教程(五)之----Android 中LayoutInflater的使用!

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://weizhulin.blog.51cto.com/1556324/311450 大 ...

  3. Wininet笔记一

    1, InternetOpen 创建根句柄,由下一层的 InternetOpenUrl 和 InternetConnect 使用,而 InternetConnect 创建的句柄又被之后的几个函数使用. ...

  4. Swift开发语法

    Swift开发入门 简介 Swift 语言由苹果公司在 2014 年推出,用来撰写 OS X 和 iOS 应用程序 2014 年,在 Apple WWDC 发布 历史 2010 年 7 月,苹果开发者 ...

  5. eclipse+python+Anaconda ML环境搭建

    整个流程按照这个来: http://blog.csdn.net/olaking/article/details/42435451 你会发现pydev安装不了,听说服务器被和谐了,下面这篇文章告诉你如何 ...

  6. C# 剪贴板中文乱码问题

    最近写了个小工具.主要功能是生成一些数据,然后一键复制,最终粘贴到需要的地方. 本来一切正常的,可是当把工具拿给朋友使用时,却被告知粘贴出来的数据是乱码.当时第一时间想到是区域问题(朋友是台湾人),不 ...

  7. [java核心篇02]__内部类

    前言 其实我们在前面已经初步接触到内部类了,但是我们去对它的作用并不胜了解.只是简单的知道了类的定义也是可以嵌套的,定义在一个类里面的类就是内部类. class out{ private String ...

  8. JavaScript 基础,登录验证

    1.<script></script>的三种用法: a.放在<body>中 b.放在<head>中 c.放在外部JS文件中 <!DOCTYPE h ...

  9. 【嵌入式】arm-linux-gcc/ld/objcopy/objdump参数概述

    arm-linux-gcc -o 只激活预处理,编译,和汇编,也就是他只把程序做成obj文件   -Wall 指定产生全部的警告信息   -O2 编译器对程序提供的编译优化选项,在编译的时候使用该选项 ...

  10. 机器学习 Numpy库入门

    2017-06-28 13:56:25 Numpy 提供了一个强大的N维数组对象ndarray,提供了线性代数,傅里叶变换和随机数生成等的基本功能,可以说Numpy是Scipy,Pandas等科学计算 ...