Vue .sync修饰符与$emit(update:xxx)写法问题
在学习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)写法问题的更多相关文章
- 深入理解vue 修饰符sync【 vue sync修饰符示例】
在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync .但是在 2.0 发 ...
- Vue sync修饰符的使用
父子组件传值,父组件可以给子组件传值,但是子组件是不能修改组件提供的值,这里vue提供了sync修饰符,以前父组件点击子组件显示,子组件关闭按钮,父组件再点击子组件就无法让子组件显示.因为子组件点击关 ...
- vue .sync修饰符
.sync 修饰符 对一个 prop 进行“双向绑定”时,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 那这个修饰符的原理是什么呢?其实还是vu ...
- vue .sync 修饰符和自定义v-model的使用
VUE 是单向数据流 当我们需要对一个 prop 进行"双向绑定"时 vue 修饰符.sync 子组件:this.$emit('update:visible', visible), ...
- vue 之 .sync 修饰符
在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...
- vue中.sync 修饰符
一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”. 正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是 ...
- Vue中v-model解析、sync修饰符解析
上善若水,水善利萬物而不爭.——<道德經> 简介 在平时开发是经常用到一些父子组件通信,经常用到props.vuex等等,这里面记录另外的三种方式v-model.sync是怎么使用,再说是 ...
- vue的.sync 修饰符
很多时候,我们会对 prop (父子组件传递数据的属性) 进行“双向绑定” 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会 ...
- vue中的.sync修饰符用法
在项目中接触到父组件传值给子组件的时候,想在子组件改变父组件传的值.(比如用于弹窗关闭) 但是正常来说,vue2是不允许子组件直接改父组件传进去的值的. 所以我们需要在子组件内定义自定义事件,通知父组 ...
随机推荐
- php漂亮的分页类
<?php /* * PHP分页类 * @package Page * @Created 2013-03-27 * @Modify 2013-03-27 * ...
- Spring - <bean parent="xxx" 属性>
总结 必要条件: 1.子bean必须与父bean保持兼容,也就是说子bean中必须有父bean定义的所有属性. 2.父bean必须是抽象bean或者定义lazy-init=true也就是不让bean工 ...
- C/C++ 无法解析的外部符号解决方案
{ //0 类的成员函数没有实现就调用 //1 调用没有编译生成cpp 的函数 //2 没有加载lib //3 最重要的就是有声明无实现 }
- Delphi Format函数功能及用法详解
DELPHI中Format函数功能及用法详解 DELPHI中Format函数功能及用法详解function Format(const Format: string; const Args: array ...
- QueryList 内容过滤
<?php require 'vendor/autoload.php'; use QL\QueryList; $html =<<<STR <div id="de ...
- PDO::beginTransaction
语法 bool PDO::beginTransaction ( void ) 关闭自动提交模式.自动提交模式被关闭的同时,通过 PDO 对象实例对数据库做出的更改直到调用 PDO::commit() ...
- Noip 2012 day2t1 同余方程
Description 求关于x的同余方程ax ≡ 1 (mod b)的最小正整数解. Input 输入文件为mod.in. 输入只有一行,包含两个正整数 a, b,用一个空格隔开. Output 输 ...
- NOIp2018集训test-9-22(am/pm) (联考三day1/day2)
szzq学长出的题,先orz一下. day1 倾斜的线 做过差不多的题,写在我自己的博客里,我却忘得一干二净,反而李巨记得清清楚楚我写了的. 题目就是要最小化这个东西 $|\frac{y_i-y_j} ...
- NX二次开发-UFUN CSYS坐标系转换UF_CSYS_map_point
1 NX9+VS2012 2 3 #include <uf.h> 4 #include <uf_curve.h> 5 #include <uf_csys.h> 6 ...
- 剑指offer——34之字打印二叉树
题目描述 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推. 题解: 与上道题没区别,就是在存入数据时 ...