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是不允许子组件直接改父组件传进去的值的. 所以我们需要在子组件内定义自定义事件,通知父组 ...
随机推荐
- 修改、编辑pdf
Python 操作 PDF 会用到两个库,分别是:PyPDF2 和 pdfplumber 其中 PyPDF2 可以更好的读取.写入.分割.合并PDF文件,而 pdfplumber 可以更好的读取 PD ...
- scrapy框架学习(六)日志设置和数据存储
日志设置 CRITICAL : 严重错误 ERROR : 一般错误 WARNING : 警告 INFO : 一般的信息 DEBUG : 调试信息 默认的显示级别是DEBUG # 设置错误显示级别 LO ...
- 对mvc模式的理解
Model-View-Controller MVC模式是个威力强大的复合模式,是由数个设计模式结合起来的模式: 我们先看一下一个mp3播放器的设计,来由浅至深地了解这个设计模式的精髓所在: 从最直观的 ...
- WCF的实现(方式二)
参考他人实现文件传输 [WCF]利用WCF实现上传下载文件服务 服务端: 1.首先新建一个名为FileService的WCF服务库项目,如下图: 2.将Service,IService重命名为File ...
- ORACLE之自治事务
在创建存储过程时,可以用关键字: PRAGMA AUTONOMOUS_TRANSACTION 创建自治事务. 常用场景: 触发器抛错导致事务回滚,日志的记录需要用自治事务进行记录 代码抛错,导致数据库 ...
- Java 18-方法 认识方法与方法定义
1.认识方法 1)什么是方法 Java方法是语句的集合,它们在一起执行一个功能; 方法是解决一类问题的步骤的有序组合; 方法一般包含于类中; 方法在程序中被创建,在其他地方被引用2 2)方法的有点 使 ...
- 2022-04-19内部群每日三题-清辉PMP
1.一个项目的完工预算(BAC)为100,000美元.目前的项目报告显示该项目符合进度和预算.一位团队成员对相关工作包进行自下而上估算,表明剩余工作将比原计划少用10,000美元,并且仍能按进度计划交 ...
- Android 将函数放到主线程运行
有时候,app会检测加密函数是否在主线程运行,为了逃避这种检测,要将函数放到主线程运行 Class<?> aClass = RposedHelpers.findClass("co ...
- cadence报错because the library part is newer than the part in the design cache.Select the part in the cache and choose Design-Update Cache,and then place the part again.
cadence报错because the library part is newer than the part in the design cache.Select the part in the ...
- taro, h5拨打电话和发送短信
1. h5的实现方式 首先加个允许meta <meta name="format-detection" content="telephone=yes"/& ...