我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的。。。。

在编程的时候我们很习惯冒号后面跟着空格。而.sync双向绑定需要子组件显性触发

    this.$emit('update:foo', newValue)

这里的updata:foo可以说是一个名字,不能加空格,不能加空格,不能加空格!!!这就是坑,由于编程习惯,也许会有人加空格,我也是,所以写出来当作一个笔记。

根据文档

    <comp :foo.sync="bar"></comp>.

会被扩展为:

    <comp :foo="bar" @update:foo="val => bar = val"></comp>

所以update:foo就是事件的名称,事件里面是一个函数,传入val参数赋值给bar变量。。。。所以update:foo是一个事件名,你加空格就完全变了一个事件名了。

至于怎么变,估计得看文档,我也不懂-_-

vue组件双向绑定.sync修饰符的一个坑的更多相关文章

  1. vue组件中的.sync修饰符使用

    在vue的组件通信props中,一般情况下,数据都是单向的,子组件不会更改父组件的值,那么vue提供.sync作为双向传递的关键字,实现了父组件的变动会传递给子组件,而子组件的carts改变时,通过事 ...

  2. 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理

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

  3. [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)

    preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...

  4. 43.VUE学习之--组件之使用.sync修饰符与computed计算属性超简单的实现美团购物车原理

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

  5. vue .sync修饰符

    .sync 修饰符 对一个 prop 进行“双向绑定”时,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 那这个修饰符的原理是什么呢?其实还是vu ...

  6. Vue .sync修饰符与$emit(update:xxx)写法问题

    在学习vue自定义事件的.sync修饰符实现改变数值时发现一个问题如下由于props的大小写命名:fatherNum,对应不同的$emit()会有不同的效果,具体如下: 使用.sync修饰符,即 // ...

  7. [Vue]组件——.sync 修饰符实现对prop 进行“双向绑定”

    一.同时设置1个 prop 1.以 update:my-prop-name 的模式触发事件,如对于title属性: this.$emit('update:title', newTitle) 2.然后父 ...

  8. VUE组件3 数据流和.sync修饰符

    单向数据流:数据通过prop从父组件传递到子组件中,当父级组件中的数据更新时,传子组件也会更新,但不能在子组件中修改.防止子组件在无意中修改,改变父级组件状态 然而,双向数据绑定在某些情况下有用.如果 ...

  9. 第六十二篇:Vue的双向绑定与按键修饰符

    好家伙,依旧是vue的基础 1.按键修饰符 假设我们在一个<input>框中输入了12345,我们希望按一下"Esc" 然后删除所有前面输入的内容,这时候,我们会用到按 ...

随机推荐

  1. 基于vue实现上下滑动翻页效果

    18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...

  2. Windows Server 2016 IIS10安装URLRewrite 2.0组件方法

    1,打开Regedit> HKEY_LOCAL_MACHINE \ SOFTWARE \ Microsoft \ InetStp2,编辑“MajorVersion”并以十进制设置数值数据值为93 ...

  3. The Datawarehouse's future is bright

    The Future Data Warehouse Professionals I hava remarked many times that a successful data warehouse ...

  4. 关于logrotate工具的日志切割

    logrotate是一个非常好的文件切割工具!! 具体配置如下: /var/log/debug.log{         daily            ; 每天转储         rotate ...

  5. js-带操作的赋值表达式

    带操作的赋值表达式为: a op= b 这里op代表一个运算符,这个表达式等价于: a = a op b 这里需要特别注意:在第一个表达式中,表达式a计算了一次,而在第二个表达式中,表达式a计算了两次 ...

  6. 处女座和小姐姐(三)(数位dp)

    链接:https://ac.nowcoder.com/acm/contest/329/G 来源:牛客网 题目描述 经过了选号和漫长的等待,处女座终于拿到了给小姐姐定制的手环,小姐姐看到以后直呼666! ...

  7. UVA12558 Egyptian Fractions (HARD version)(埃及分数)

    传送门 题目大意 给出一个真分数 a/b,要求出几个互不相同的埃及分数(从大到小),使得它们之和为 a/b (埃及分数意思是分子为1的分数,详见百度百科) 如果有多组解,则分数数量少的优先 如果分数数 ...

  8. linu samba服务

    关闭防火墙并且重启网络yum install samba  samba-client samba-commmon -ysystemctl start smb smbclient -L //172.25 ...

  9. Linux字符设备简单示例

    1. Linux字符设备是一种按字节来访问的设备,字符驱动则负责驱动字符设备,这样的驱动通常实现open.close.read和write系统调用.例如:串口.Led.按键等. 2. 通过字符设备文件 ...

  10. 1.Ioc&DI和Spring

    1.面向对象回顾和案例 面向对象程序设计:1 2 3 4 案例分析: 需求分析: 报表功能:     报表服务类,检索数据,并生成图标     报表生成器类,生成不同格式的报表文件,例如PDF格式.H ...