在学习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. Stack&Heap的理解

    Heap(堆):在英文中有杂乱的堆意思,意译中文为堆:其特点为先进先出. 堆空间分配:一般由程序员分配释放, 若程序员不释放,程序结束时可能由OS回收,分配方式倒是类似于链表. Stack(栈):在英 ...

  2. MapReduce计算原理及步骤

    步骤:input从HDFS读取内容, split()切割分片内容,key/value, map()方法对输入的key/value进行计算处理,先写到内存,在内存中进行分区.排序,之后将Key/valu ...

  3. Delphi 窗体的释放和判断窗体是否存在

    常规释放和关闭: Form.Free   -   释放Form占用的所有资源.Free后,Form指针不能再使用,除非对Form重新赋值.   Form.Hide   -   隐藏Form.可以调用f ...

  4. 关于SecureCRT链接服务器出现乱码的问题

    连接到服务器,选择上方的“选项”->“会话选项”->“外观”->右边的字符编码->utf-8

  5. 26 函数形参值回传问题——C++解决多个return的一般方法

    0 引言 在使用数组和vector作为函数的参数进行参数传递并希望得到值的回传时,由于不知道怎么写数组函数形参的引用形式,一直采用vector的引用形式.但是,刚刚测试了一下,发现数组作为参数本身就是 ...

  6. 绘制delphi窗体的标题栏

    绘制delphi窗体的标题栏 按照设计,Delphi窗体的“标题”属性是由Windows负责绘制,标题栏在系统菜单旁边.如果你不想改变窗体的标题属性又想在窗体的标题栏添加一些自己的内容,你需要处理一个 ...

  7. NX二次开发-UFUN多选菜单对话框uc1605

    NX11+VS2013 #include <uf.h> #include <uf_ui.h> UF_initialize(); //多选菜单对话框 char sPromptSt ...

  8. POJ3241 最小曼哈顿距离生成树 - 真有趣哇

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog Problem:Portal传送门  原题目描述在最下面.  给你n个坐标, ...

  9. 10.RabbitMQ Fanout类型交换机

    Fanout类型交换机忽略Routing Key,它将消息传递到所有与它绑定的队列上.       Producer.java package com.test.fanout;   import co ...

  10. Bootstrap3的响应式缩略图幻灯轮播效果设计

    在线演示1 本地下载 HTML <div class="container">  <div class="col-md-12">  &l ...