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. CH583 是集成 BLE 无线通讯的 RISC-V MCU 微控制器

    CH583 是集成 BLE 无线通讯的 RISC-V MCU 微控制器.片上集成 2Mbps 低功耗蓝牙 BLE 通讯模块.2 个全速 USB 主机和设备控制器及收发器.2 个 SPI.4 个串口.1 ...

  2. ubuntu 下如何设置环境变量

    一.设置环境变量的三种方法 1.1 临时设置 export PATH=/home/yan/share/usr/local/arm/3.4.1/bin:$PATH 1.2 当前用户的全局设置 打开~/. ...

  3. 双CAN通讯模板

    本文中CAN1采用16位掩码,CAN2只能使用大于等于14的筛选器组,根据手册只能使用32位的掩码(因为大于14的筛选器没有说明). 经测试,STM32手册中的筛选器配置图错误,库函数的命名正确.参考 ...

  4. SQLSERVER自动备份数据库

    1. 通过操作系统的定时任务执行 创建两个文件,auto.bat和auto.sql,使用bat调用sql文件中的代码段 auto.bat内容 sqlcmd -S localhost,2433 -U s ...

  5. tomcat代理,监控及性能优化

    第1章 tomcat简介Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache,Sun和其他一些公司及个人共同 ...

  6. Ubuntu网络重置

    Ubuntu网络重置 >重置网络 sudo service network-manager stop sudo rm /var/lib/NetworkManager/NetworkManager ...

  7. 怎么把百度地图的搜索结果全部导出到Excel文件

    有很多人问我,怎么样能够快速的把BAIDU地图左边的搜索列表里的商家地图,电话,导出到EXCEL里. 我就开发了一个小软件,专门为快速的实现导出数据到EXCEL. 为了使用方便,已经将全国的所又省份, ...

  8. 慢SQL

    慢SQL 目录 慢SQL 一.慢SQL概念 2.参数 3.配置 3.1.slow_query_log 3.2.slow_query_log_file 3.3.long_query_time 3.4.l ...

  9. Webservice或WebAPi Post类型传参,类对象格式转换

    有类: public class ImgInfo { public int fs { get; set; } public string FileName { get; set; } public s ...

  10. Linux - 查看、修改、更新系统时间(自动同步网络时间)

    系统:Centos7 1.查看系统时间 执行 date 命令可以查看当前系统的时间: 执行 hwclock 命令可以查看当前系统的时间 2.手动修改系统时间 (1)执行如下命令可以设置一个新的系统时间 ...