单向数据流：数据通过prop从父组件传递到子组件中，当父级组件中的数据更新时，传子组件也会更新，但不能在子组件中修改。防止子组件在无意中修改，改变父级组件状态

然而，双向数据绑定在某些情况下有用。如果想要使用双向数据绑定，可以使用一个修饰符来实现：.sync修饰符。这只是一个语法糖

例：<count-from-number :number.sync = "test"/>  等效于 <count-from-number :number = "test" @update:number"val => numberToD = val />

所以要改变父级组件的值，需要触发update:number事件，示例中的number ---是将要更新的值的名称

如果只想更新prop传过来的值而不关心父级组件的值更新，可以在一开始通过this引用prop的值，将它复制到data中。需要注意的是，如果prop的值更新了，组件内部并不会更新，如果想要更新可以添加一个监听器，来重新赋值。

与.sync相似可以在组件上使用v-model指令来创建自定义输入组件

VUE组件3 数据流和.sync修饰符的更多相关文章

  1. Vue中v-model解析、sync修饰符解析

    上善若水,水善利萬物而不爭.——<道德經> 简介 在平时开发是经常用到一些父子组件通信,经常用到props.vuex等等,这里面记录另外的三种方式v-model.sync是怎么使用,再说是 ...

  2. vue 之 .sync 修饰符

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

  3. 使用sync 修饰符------子组件内部可以修改props

    首先看一个需求,外部点击一个按钮,让弹窗组件显示(也就是将弹窗组件显示的flag置为true),点击弹窗组件内部的某个按钮 ,让改props置为false,关闭弹窗,但是会报警告,因为内层组件不能修改 ...

  4. vue的.sync 修饰符

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

  5. sync 修饰符在Vue中如何使用

    在有些情况下,我们可能需要对一个 prop 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源.   这 ...

  6. 深入理解.sync修饰符

    原文地址:http://www.geeee.top/2019/04/17/vue-sync/ 转载请注明出处 .sync修饰符 一个组件上只能定义一个v-model,如果其他prop也要实现双向绑定的 ...

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

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

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

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

  9. vue组件双向绑定.sync修饰符的一个坑

    我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的.... 在编程的时候我们很习惯冒号后面跟着空格.而.sync双向绑定需要 ...

随机推荐

  1. 201671030103 实验十四 团队项目评审&课程学习总结

    项目 内容 这个作业属于哪个课程 任课教师首页链接 这个作业的要求在哪里 作业链接地址 课程学习目标 (1)掌握软件项目评审会流程 (2)反思总结课程学习内容 任务一: 团队项目Github仓库中提交 ...

  2. Scrapy笔记12- 抓取动态网站

    Scrapy笔记12- 抓取动态网站 前面我们介绍的都是去抓取静态的网站页面,也就是说我们打开某个链接,它的内容全部呈现出来. 但是如今的互联网大部分的web页面都是动态的,经常逛的网站例如京东.淘宝 ...

  3. （HK1-0）激活与配置摄像机

    HK使用手册 网络连接 激活与配置摄像机 网络摄像机可通过 SADP 软件.客户端软件和浏览器三种方式激活, 具体激活操作方式可参见<网络摄像机操作手册>. 1. 安装随机光盘或从官网下载 ...

  4. python源码解剖

    print()本身就是用了多态:不同类型的对象,其实是调用了自身的print()方法 多态:动物 狗1 = new狗() 用公共的部分来指定类型,实则是调用各自的属性 创建对象有两种方式: 通过C A ...

  5. iptables 常用处理动作

    在iptables中,-j 参数用来指定要进行的处理动作,常用的处理动作包括:ACCEPT.REJECT.DROP.REDIRECT.MASQUERADE.LOG.DNAT.SNAT.MIRROR.Q ...

  6. nginx配置神器

    原文 https://mp.weixin.qq.com/s/zFEk7XzHj3xPReDXEnQxcQ https://nginxconfig.io/ Nginx作为一个轻量级的HTTP服务器,相比 ...

  7. Linux 中【./】和【/】和【.】之间有什么区别？

    /是指根目录,就和Windows的我的电脑那个位置差不多../是指用户所在的当前目录.如下所示:[root~]# cd /etc[root etc]# pwd/etc[rootetc]# cd /[r ...

  8. Oracle_创建自增

    create sequence SEQ_ChamberMapping_ID minvalue maxvalue start with increment by nocache order; CREAT ...

  9. 关于Class: ES6 JavaScript的class的静态方法、属性和实例属性。

    1.什么叫做静态方法? 1.1.类相当于实例的原型, 所有在类中定义的方法, 都会被实例继承.如果在一个方法前,加上Static关键字,就表示该方法不会被继承,而是直接通过类来调用,这被称为 “静态方 ...

  10. [原创]K8域控植入脚本生成器(内网渗透/RPC不可用解决方案)

    0x001 简介 当IPC或WMI无法访问域内机器时,可通过脚本上控. 我们可以在个人机的开机注销重启脚本里配置持久化. 域环境下同样也有开机脚本,但得在在域控机器配置 可以使用BAT\VBS等脚本, ...