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)的更多相关文章

  1. Vue .sync修饰符与$emit(update:xxx)写法问题

    在学习vue自定义事件的.sync修饰符实现改变数值时发现一个问题如下由于props的大小写命名:fatherNum,对应不同的$emit()会有不同的效果,具体如下: 使用.sync修饰符,即 // ...

  2. 深入理解vue 修饰符sync【 vue sync修饰符示例】

    在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync .但是在 2.0 发 ...

  3. Vue sync修饰符的使用

    父子组件传值,父组件可以给子组件传值,但是子组件是不能修改组件提供的值,这里vue提供了sync修饰符,以前父组件点击子组件显示,子组件关闭按钮,父组件再点击子组件就无法让子组件显示.因为子组件点击关 ...

  4. vue .sync 修饰符和自定义v-model的使用

    VUE 是单向数据流 当我们需要对一个 prop 进行"双向绑定"时 vue 修饰符.sync 子组件:this.$emit('update:visible', visible), ...

  5. vue .sync修饰符

    .sync 修饰符 对一个 prop 进行“双向绑定”时,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 那这个修饰符的原理是什么呢?其实还是vu ...

  6. vue 之 .sync 修饰符

    在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...

  7. vue中.sync 修饰符

    一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”. 正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是 ...

  8. Vue中v-model解析、sync修饰符解析

    上善若水,水善利萬物而不爭.——<道德經> 简介 在平时开发是经常用到一些父子组件通信,经常用到props.vuex等等,这里面记录另外的三种方式v-model.sync是怎么使用,再说是 ...

  9. vue的.sync 修饰符

    很多时候,我们会对 prop (父子组件传递数据的属性) 进行“双向绑定” 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会 ...

  10. vue中的.sync修饰符用法

    在项目中接触到父组件传值给子组件的时候,想在子组件改变父组件传的值.(比如用于弹窗关闭) 但是正常来说,vue2是不允许子组件直接改父组件传进去的值的. 所以我们需要在子组件内定义自定义事件,通知父组 ...

随机推荐

  1. 修改、编辑pdf

    Python 操作 PDF 会用到两个库,分别是:PyPDF2 和 pdfplumber 其中 PyPDF2 可以更好的读取.写入.分割.合并PDF文件,而 pdfplumber 可以更好的读取 PD ...

  2. scrapy框架学习(六)日志设置和数据存储

    日志设置 CRITICAL : 严重错误 ERROR : 一般错误 WARNING : 警告 INFO : 一般的信息 DEBUG : 调试信息 默认的显示级别是DEBUG # 设置错误显示级别 LO ...

  3. 对mvc模式的理解

    Model-View-Controller MVC模式是个威力强大的复合模式,是由数个设计模式结合起来的模式: 我们先看一下一个mp3播放器的设计,来由浅至深地了解这个设计模式的精髓所在: 从最直观的 ...

  4. WCF的实现(方式二)

    参考他人实现文件传输 [WCF]利用WCF实现上传下载文件服务 服务端: 1.首先新建一个名为FileService的WCF服务库项目,如下图: 2.将Service,IService重命名为File ...

  5. ORACLE之自治事务

    在创建存储过程时,可以用关键字: PRAGMA AUTONOMOUS_TRANSACTION 创建自治事务. 常用场景: 触发器抛错导致事务回滚,日志的记录需要用自治事务进行记录 代码抛错,导致数据库 ...

  6. Java 18-方法 认识方法与方法定义

    1.认识方法 1)什么是方法 Java方法是语句的集合,它们在一起执行一个功能; 方法是解决一类问题的步骤的有序组合; 方法一般包含于类中; 方法在程序中被创建,在其他地方被引用2 2)方法的有点 使 ...

  7. 2022-04-19内部群每日三题-清辉PMP

    1.一个项目的完工预算(BAC)为100,000美元.目前的项目报告显示该项目符合进度和预算.一位团队成员对相关工作包进行自下而上估算,表明剩余工作将比原计划少用10,000美元,并且仍能按进度计划交 ...

  8. Android 将函数放到主线程运行

    有时候,app会检测加密函数是否在主线程运行,为了逃避这种检测,要将函数放到主线程运行 Class<?> aClass = RposedHelpers.findClass("co ...

  9. 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 ...

  10. taro, h5拨打电话和发送短信

    1. h5的实现方式 首先加个允许meta <meta name="format-detection" content="telephone=yes"/& ...