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是不允许子组件直接改父组件传进去的值的. 所以我们需要在子组件内定义自定义事件,通知父组 ...
随机推荐
- 在windows上远程linux (待完善)
一.准备工具 windows linux 系统 win10 centos7 软件 远程桌面连接(自带) xrdp(epel库提供):开源的远程桌面协议(RDP)服务 二.Linux(被连接端) 2 ...
- 「部署日记」Android Studio乱码解决方案
弄了一台新电脑,第一件事肯定是弄好打造台啦 于是VS.AS.CRD.NSIS.Adobe全家桶全安装完毕, 问题来了,在打开Android Studio时,出现乱码,比如 这样的: 这样的: 这样的: ...
- e网通公告
title:用户须知titleend<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \&qu ...
- PYTHON用户流失数据挖掘:建立逻辑回归、XGBOOST、随机森林、决策树、支持向量机、朴素贝叶斯和KMEANS聚类用户画像|附代码数据
原文链接:http://tecdat.cn/?p=24346 最近我们被客户要求撰写关于用户流失数据挖掘的研究报告,包括一些图形和统计输出. 在今天产品高度同质化的品牌营销阶段,企业与企业之间的竞争集 ...
- centos7 启动报错 Failed to mount /sysroot
centos7 启动报错 Failed to mount /sysroot 场景: centos7系统异常关闭后,启动后进入不了图形化界面 解决方法: 1. 定位报错原因 进入单用户模式后执行下面 ...
- windows环境下部署项目
有些时候,我们的项目不得不用windows服务器部署,但是需要注意的是,windows服务是无法开启多进程处理请求的. 本文介绍如何在windows上部署flask项目,应用 apache + mod ...
- 面试题-react
对react的理解 是什么 React 是一个用于构建用户界面的 JavaScript 库. 能干什么 可以通过组件化的方式构建大型的,快速响应的大型web应用 如何做 声明式 React 使用jsx ...
- c语言学习--静态函数
静态函数 #include<stdio.h> //这是静态函数, 静态函数只能在当前文件调用,其他文件下面的函数是没法调用到这个函数的 static void fun1() { print ...
- svn提交注释限制
找到svn仓库 目录结构长这样 在hooks下的新建一个名字为pre-commit.bat的可执行文件 注意:findstr后边的.通配符表示一个任意字符,findstr "." ...
- idea引入ojdbc包报错
网上下载或者让同事传两个jar过来,ojdbc6-11.2.0.7.0.jar 以及jconn3.0.jar 放入同一个文件夹中: 在此文件夹中cmd如下:回车,进入cmd控制台. 输入如下两个命令: ...