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

使用.sync修饰符,即

    // this.$emit('update:father-num',100);  //无效
this.$emit('update:fatherNum',100); //有效
//......
<father v-bind:father-num.sync="test"></father>

不使用.sync,即

      this.$emit('update:father-num',100);  //有效
//this.$emit('update:fatherNum',100); // 无效 //......
<father v-bind:father-num="test" v-on:update:father-num="test=$event" ></father>

Vue .sync修饰符与$emit(update:xxx)写法问题的更多相关文章

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

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

  2. Vue sync修饰符的使用

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

  3. vue .sync修饰符

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

  4. vue .sync 修饰符和自定义v-model的使用

    VUE 是单向数据流 当我们需要对一个 prop 进行"双向绑定"时 vue 修饰符.sync 子组件:this.$emit('update:visible', visible), ...

  5. vue 之 .sync 修饰符

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

  6. vue中.sync 修饰符

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

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

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

  8. vue的.sync 修饰符

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

  9. vue中的.sync修饰符用法

    在项目中接触到父组件传值给子组件的时候,想在子组件改变父组件传的值.(比如用于弹窗关闭) 但是正常来说,vue2是不允许子组件直接改父组件传进去的值的. 所以我们需要在子组件内定义自定义事件,通知父组 ...

随机推荐

  1. Batch - FOR %%a %%b

    总结 %%a refers to the name of the variable your for loop will write to. Quoted from for /?: FOR %vari ...

  2. sed 一 文本处理工具

    简介 sed 采用的是流编辑模式: 最明显的特点是,在 sed 处理数据之前,需要预先提供一组规则,sed 会按照此规则来编辑数据. sed 会根据脚本命令来处理文本文件中的数据,这些命令要么从命令行 ...

  3. bzoj3505: [Cqoi2014]数三角形 [数论][gcd]

    Description 给定一个nxm的网格,请计算三点都在格点上的三角形共有多少个.下图为4x4的网格上的一个三角形. 注意三角形的三点不能共线. Input 输入一行,包含两个空格分隔的正整数m和 ...

  4. 牛客多校第十场 H Stammering Chemists 判断图同构

    题意: 给出一个无向图,表示一种有机物质的结构式,问你这个有机物质是列表中的哪个. 题解: 判断图同构需要枚举全排列以对应点,但是此题中几乎只需要将点度数排序后一个一个比较,对于甲基位置再加个特判即可 ...

  5. nlp总结

    中科院nlpir和海量分词(http://www.hylanda.com/)是收费的. hanlp:推荐基于CRF的模型的实现~~要看语料,很多常用词会被分错,所以需要词库支撑.目前最友好的开源工具包 ...

  6. Apache Spark 2.2.0 中文文档 - Spark RDD(Resilient Distributed Datasets)

    Spark RDD(Resilient Distributed Datasets)论文 概要 1: 介绍 2: Resilient Distributed Datasets(RDDs) 2.1 RDD ...

  7. Flutter 打包报错 : Unknown FLUTTER_BUILD_MODE: xxx

    概要 在集成flutter 工程之后,我们的工程在debug 和release 模式下都没什么问题,一切都很顺利.但是我们在打企业包的时候却出现了错误: Showing Recent Errors O ...

  8. c++11 Thread库写多线程程序

    一个简单的使用线程的Demo c++11提供了一个新的头文件<thread>提供了对线程函数的支持的声明(其他数据保护相关的声明放在其他的头文件中,暂时先从thread头文件入手吧),写一 ...

  9. nginx代理配置备份

    补充: 代理对文件大小的限制, server {client_max_body_size 100M;listen 9096;server_name gate.chaohuoyy.com; locati ...

  10. JS对象 返回/设置时间方法 get/setTime() 返回/设置时间,单位毫秒数 一小时为:60*60*1000

    返回/设置时间方法 get/setTime() 返回/设置时间,单位毫秒数,计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数. 如果将目前日期对象的时间推迟1小时,代码如下: &l ...