Vue.sync修饰符与this.$emit('update:xxx', newXXX)
Vue通过prop进行双向数据绑定。子组件数据变化,一般只能通过 this.$emit(func, val) 回调父组件函数来传值给父组件。
Vue2.3版本引入sync,作为一个事件绑定语法糖,当子组件触发事件时,父组件会响应事件并实现数据更新。
.sync 修饰符 this.$emit('update:title', newTitle)
父组件:
<parent-comp :visible.sync="isShow"></parent-comp>
子组件:
props: {
visible: {
type: Boolean,
default: false
}
},
methods: {
// 子组件触发函数
handleClose() {
this.$emit('update:visible', false)
},
}
Vue.sync修饰符与this.$emit('update:xxx', newXXX)的更多相关文章
- Vue .sync修饰符与$emit(update:xxx)写法问题
在学习vue自定义事件的.sync修饰符实现改变数值时发现一个问题如下由于props的大小写命名:fatherNum,对应不同的$emit()会有不同的效果,具体如下: 使用.sync修饰符,即 // ...
- 深入理解vue 修饰符sync【 vue sync修饰符示例】
在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync .但是在 2.0 发 ...
- Vue sync修饰符的使用
父子组件传值,父组件可以给子组件传值,但是子组件是不能修改组件提供的值,这里vue提供了sync修饰符,以前父组件点击子组件显示,子组件关闭按钮,父组件再点击子组件就无法让子组件显示.因为子组件点击关 ...
- vue .sync 修饰符和自定义v-model的使用
VUE 是单向数据流 当我们需要对一个 prop 进行"双向绑定"时 vue 修饰符.sync 子组件:this.$emit('update:visible', visible), ...
- vue .sync修饰符
.sync 修饰符 对一个 prop 进行“双向绑定”时,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 那这个修饰符的原理是什么呢?其实还是vu ...
- 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是不允许子组件直接改父组件传进去的值的. 所以我们需要在子组件内定义自定义事件,通知父组 ...
随机推荐
- java.sql.SQLIntegrityConstraintViolationException: Duplicate entry '1' for key 'PRIMARY'
你设置的主键里面已经有一个值为1的数值了,再插入一个就重复了. 但是主键是不能重复的.
- new与delete只能被重载为成员函数;而<<等只能被重载为非成员函数
链接:https://www.nowcoder.com/questionTerminal/5760864337084de6891a9944f41e60f4来源:牛客网 应用程序可以将重载的new/de ...
- (python)json 格式文件
Json 数据格式: python 的内置模块: json 格式数据声明只能有一层顶级层(字典格式,可以是任意对象,如字符串,列表等,但实际工作中一般为字典对象,) json 对象本质是一个字符串对象 ...
- The 17th Zhejiang Provincial Collegiate Programming Contest B.Bin Packing Problem
题意 给定n个物品,和一个容量为C的桶 需要求出为了装下这些物品,分别使用首次适应算法(FF).最佳适应算法(BF)需要的桶的数量 \(n \leq 10^6\) 思路 BF:容易想到可以用set维护 ...
- JavaScript的原型和原型链
说到JavaScript的原型和原型链,相关文章已有不少,但是大都晦涩难懂.本文将换一个角度出发,先理解原型和原型链是什么,有什么作用,再去分析那些令人头疼的关系. 一.引用类型皆为对象 原型和原型链 ...
- CentOS7 minimal 安装 VMware Tools(自带脚本安装)
1.安装相关组件 yum -y install perl gcc make kernel-headers kernel-devel net-tools 2.新建挂载目录 mkdir -p /mnt/c ...
- Objectarx2016在VS2012里面创建失败的解决办法
在网上找了很多办法,有说需要管理员权限运行msi的,还有什么ucs的,经过我的尝试,最后找到了办法 解决办法是,在vs2012的根目录下>>vc>>vcprojects> ...
- Unity3d 动画转换中断
翻译自https://blogs.unity3d.com/2016/07/13/wait-ive-changed-my-mind-state-machine-transition-interrupti ...
- 【转载】win10怎么设置窗口护眼?
转载地址:http://www.downza.cn/xy/122656.html win10设置窗口护眼模式的方法 2021-04-13 13:30:54来源:下载之家作者:down 小伙伴们你们知道 ...
- vue- cube-scroll踩坑记
坑: 下拉刷新,上拉加载一直处于加载中 --- 原因:未结束此次下拉或上拉 ---解决:forceUpdate()结束上拉或下拉 无法正常滚动 --- 原因:数据更新了,但页面高度未变化 -- ...