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. System.Diagnostics.Process.Start(); 用法详解

    来源:https://news.68idc.cn/buildlang/ask/20150104156981.html 实例代码:http://www.cppcns.com/ruanjian/cshar ...

  2. clickHouse安装踩坑

    1.查看版本  clickhouse-server --version 2.下载 linux机器上 wget下载,有两个安装包体积较大 wget https://packages.clickhouse ...

  3. 数据库可视化---grafana的简单使用

    简介 grafana可以连接各种数据源, 并通过给定的SQL语句做数据的定时统计和web大屏展示,也可以对外提供API进行展示, 类似这样 内含多种不同类型图表, 可以涵盖很多种监控需求, 报表可视化 ...

  4. 自考网络原理:安全套接字层SSL

    对ssl/tls的理解 前:SSL; 后:TLS: 以下是B站上的up主讲的,非常的深入浅出,讲的很好.感谢技术蛋老师. https://www.bilibili.com/video/BV1KY411 ...

  5. Oracle View的Force參數有什麼用途?

    1. 當建立View的SQL查詢語句因為各種問題還暫時無法執行時,可以使用Force參數先建立成功2. SQL的問題沒有修正之前,是無法正常使用View的 語法:  CREATE Force VIEW ...

  6. protobuf如何还原proto源文件及描述字符串中左括弧的意义

    语法分析 和通常的有语法的结构一样,proto的编译也经过词法(tokenize)和语法(parse)两个阶段,相关代码分别在tokenizer.cc和parser.cc两个文件中. /// @fil ...

  7. re的finditer()

    在前面学习了findall()函数,它可以一次性找到多个匹配的字符串,但是不能提供所在的位置,并且是一起返回的,如果有数万个一起返回来,就不太好处理了,因此要使用finditer()函数来实现每次只返 ...

  8. STM32F4 HAL库中是如何实现UART IO配置的?

    1.配置串口IO.中断等底层的东西需要在用户文件中重写HAL_UART_MspInit函数2.hal库是在stm32f4xx_hal_msp.c文件中重写的HAL_UART_MspInit函数,分析如 ...

  9. 【C学习笔记】day1-2 输出乘法口诀表

    #include<stdio.h> int main() { for (int m = 1; m <= 9; m++) for (int n = 1; n <= m; n++) ...

  10. git从某个分支的指定历史版本中创建新分支

    git从某个分支的指定历史版本中创建新分支 前提: 有时候,我们在一个分支上做了许多修改,而这些修改因即将上线等原因不可修改.而现在有一个新任务,需要在这个分支的这些修改之前进行开发. 方案①(不推荐 ...