在学习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. Java中的反射该如何使用?

    1. 什么是反射 反射是一种功能强大且复杂的机制.Java反射说的是在运行状态中,对于任何一个类,我们都能够知道这个类有哪些方法和属性.对于任何一个对象,我们都能够对它的方法和属性进行调用.我们把这种 ...

  2. List之取不同元素

    1.工具-->NuGet包管理器-->管理解决方案的NuGet包程序包 2.添加System.Linq包 3.引用 using System.linq List<int> li ...

  3. Java——Eclipse使用

    从这开始使用IDE啦~ ①File → New → Java Project →填写工程名字,选择jdk版本,其他默认,单击finish. ②在Src(源文件)上鼠标右键 → new → packag ...

  4. Dart编程环境

    本章讨论在Windows平台上为Dart设置执行环境. 使用DartPad在线执行脚本 您可以使用https://dartpad.dartlang.org/上的在线编辑器在线测试您的脚本.Dart编辑 ...

  5. lua数据类型与变量

    Lua数据类型与变量 Lua中有  8个基本类型分别为: nil.boolean.number.string.userdata.function.thread和 table. lua变量三种类型:全局 ...

  6. NX11.0和VS2013 创建NXOpen 开发模版失败解决方案【转载】

    转载自PLM之家论坛 NX11.0和VS2013 创建NXOpen 开发模版失败解决方案 首先我觉得这个可能是西门子疏忽,基本上每个大版本没有补丁前都有类似问题,下面来说说怎么解决吧.注意这里版本,N ...

  7. Go的异常处理 defer, panic, recover

    Go语言追求简洁优雅,所以,Go语言不支持传统的 try…catch…finally 这种异常,因为Go语言的设计者们认为,将异常与控制结构混在一起会很容易使得代码变得混乱.因为开发者很容易滥用异常, ...

  8. opencv-图像形态学之膨胀腐蚀

    转自:https://blog.csdn.net/poem_qianmo/article/details/23710721 一.原理 1.1 形态学概述 形态学(morphology)一词通常表示生物 ...

  9. pip安装时ReadTimeoutError解决办法

    主要是被阻断了,所以可以延长等待时间完美解决问题.  在下载终端先输入如下命令: pip --default-timeout=100 install -U pip 然后输入下载命令:pip insta ...

  10. springboot + ajax + mybatis 实现批量删除

    实现思路: 1. checkbox全选获取批量删除的id数组 2. ajax以字符串的形式将id数组传给控制器 3. 控制器将字符串分割成List数组作为参数传给mapper 具体代码: 1. 前端代 ...