vue 中的.sync语法糖
提到父子组件相互通信,可能大家的第一反应是$emit,最近在学着封装组件,以前都是用的别人封装好的UI组件,对vue
中的.sync这个修饰符有很大的忽略,后来发现这个修饰符很nice,官方对她的描述是:可以对一个prop进行双向绑定,当一
个子组件改变了一个带.sync的prop的值时,这个变化也回同步到父组件所绑定的值。
但是这个属性在vue2.0的时候溢出了,在vue2.3.0的版本中作为一个语法糖被引入,会被扩展成为一个自动更新父组件属
性的v-on监听器。
用法如下:
父组件:
<comp :show.sync="visible"></comp>
子组件:里面用update的方法,通知父组件,此属性值被修改了
close () {
this.$emit('update:show', is_show)
}
vue 中的.sync语法糖的更多相关文章
- 在vue中使用jsx语法
什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解 ...
- vue2使用组件进行父子互相传值的sync语法糖方法和原生方法
原生方法:(事件名可以不在props通道里) 子类通过props通道绑定父类里data里的jjjjjj(@:fefefeff='jjjjjjjjjjjjj') 父组件通过监听fefeff事件来把子类传 ...
- Java中部分常见语法糖
语法糖(Syntactic Sugar),也称糖衣语法,指在计算机语言中添加的某种语法,这种语法对语言本身功能来说没有什么影响,只是为了方便程序员的开发,提高开发效率.说白了,语法糖就是对现有语法的一 ...
- vue中的.sync修饰符用法
在项目中接触到父组件传值给子组件的时候,想在子组件改变父组件传的值.(比如用于弹窗关闭) 但是正常来说,vue2是不允许子组件直接改父组件传进去的值的. 所以我们需要在子组件内定义自定义事件,通知父组 ...
- vue中通过.sync修饰符实现子组件修改父组件数据
vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...
- Vue3.2中的setup语法糖,保证你看的明明白白!
vue3.2 到底更新了什么? 根据原文内容的更新的内容主要有以下 5 块: 1.SSR:服务端渲染优化.@vue/server-renderer包加了一个ES模块创建, 与Node.js解耦,使在非 ...
- Vue中使用JSX语法
一 项目结构 二 App组件 <template> <div id="app"> <fruit/> </div> </temp ...
- 【Java基础】Java中的语法糖
目录 Java中的语法糖 switch对String和枚举类的支持 对泛型的支持 包装类型的自动装箱和拆箱 变长方法参数 枚举 内部类 条件编译 断言 数值字面量 for-each try-with- ...
- Java 中的语法糖,真甜。
我把自己以往的文章汇总成为了 Github ,欢迎各位大佬 star https://github.com/crisxuan/bestJavaer 我们在日常开发中经常会使用到诸如泛型.自动拆箱和装箱 ...
随机推荐
- Debian for ARM
/************************************************************************* * Debian for ARM * 说明: * ...
- Arc066_E Addition and Subtraction Hard
传送门 题目大意 给定一个加减法的表达式,让你任意的添加合法的括号对,使的表达式最大. 题解 考虑到任意左括号一定加在减号右边,那么对于第一个左括号,与该左括号相邻的只含有加号的子序列的贡献一定为负, ...
- 洛谷【P1303】A*B Problem
题目传送门:https://www.luogu.org/problemnew/show/P1303 高精度乘法板子题,灵性地回忆一下小学时期列竖式的草稿纸即可. 时间复杂度:\(O(len^2)\) ...
- 三 volatile关键字
一:内存模型: 大家都知道,计算机在执行程序时,每条指令都是在CPU中执行的,而执行指令过程中,势必涉及到数据的读取和写入.由于程序运行过程中的临时数据是存放在主存(物理内存)当中的,这时就存在一个问 ...
- python编程范式培训文档,主要是结合4种代码和,对oop和面向过程编程区别和oop转化公式培训。
这是写得培训文档.代码例子在附件. 是经过深入考察 4个git项目里面,找出代码非常非常十分low.代码重复得吓人的的最本质原因.提炼出oop转化公式. 围绕附件中的4种代码写法思维来实现同一个任务, ...
- Asp.net Core学习笔记
之前记在github上的,现在搬运过来 变化还是很大的,感觉和Nodejs有点类似,比如中间件的使用 ,努力学习ing... 优点 不依赖IIS 开源和跨平台 中间件支持 性能优化 无所不在的依赖注入 ...
- linux命令-tar工具详解
把文件和目录打成一个包 文件打包 [root@wangshaojun ~]# tar -cvf 1.tar 1.txt 123 234 ///-c创建 -v可视化 -f file放最后面1.txt12 ...
- javascript数字千分分隔符
function thousandBitSeparator(num) { num=num.toFixed(2); return num && num .toString() .repl ...
- ABCD四个人说真话的概率都是1/3。假如A声称B否认C说D是说谎了,那么D说过的那句话真话的概率是多少
ABCD四个人说真话的概率都是1/3.假如A声称B否认C说D是说谎了,那么D说过的那句话 真话的概率是多少 记"A声称B否认C说D说谎"为X,那么由贝叶斯公式,所求的 P(D真)P ...
- python+selenium简单实现拖动元素实例
from selenium import webdriver#引入ActionChains类from selenium.webdriver.common.action_chains impo ...