单向数据流：数据通过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. 自动化测试框架：jmeter + maven+ jenkins

    原理:jenkins驱动maven执行,maven驱动jmeter执行 前提条件:windows安装了jmeter.maven.tomcat.jenkins 安装方法参考汇总目录中对应的博文:http ...

  2. USACO Clumsy Cows

    洛谷 P3056 [USACO12NOV]笨牛Clumsy Cows 洛谷传送门 JDOJ 2323: USACO 2012 Nov Silver 1.Clumsy Cows JDOJ传送门 Desc ...

  3. selenium--更改标签的属性值

    前戏 在进行web自动化的时候,我们有时需要获取元素的属性,有时需要添加,有时需要删除,这时候就要通过js来进行操作了 实战 from selenium import webdriver import ...

  4. [BZOJ1015/JSOI2008]星球大战

    // 此博文为迁移而来,写于2015年7月16日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102w6le.html 1.题 ...

  5. （转）简单的Malloc实现

    现在,一般来说,我们可以实现malloc使得对malloc的调用将会被映射到系统调用sbrk上,sbrk(n)将会移动程序中断的位置-也就是程序的data段的最后.-偏移n个字节,这意味着,n个字节的 ...

  6. C# 委托的本质

    它本质是一个方法的容器 委托 只是 一件衣服, 在所有将委托做参数的地方 ,首先想到的是放一个对应的方法进来.

  7. 【JZOJ6236】【20190628】启程的日子

    题目 给你一个\(n \times m\)的01矩阵 你需要用一些矩阵加减出这个矩阵 求最少的步数,并输出方案 需要满足构造出的01矩阵是一个四联通块 $ n ,  m \le 500 $ 题解 答案 ...

  8. php获取客户端公网ip代码

    <?php /*如果是本地服务器获取客户端的ip地址是 127.0.0.1 如果是域名服务器获取客户端的是公网ip地址*/ function get_client_ip() { $ipaddre ...

  9. 几句话总结一个算法之Q-Learning与Sarsa

    与Policy Gradients的不同之处在于,这两个算法评估某个状态s执行某个动作a的期望奖励,即Q(s,a) Q(s,a) 有两种方法计算方法,第一种直接查表或者模型预估,Q(s, a) = c ...

  10. 天际PRO-CR16 改装方案

    本人现有红色CR16一台,宿舍在7楼,最近找了一份长期兼职,不想挤公交,想骑车去,经常上下楼很是痛苦,琢磨了两天两夜,终于出来第一套小该方案,有不合理地方,或者有个好的零件选择,请各位指点.本人不胜感 ...