提到父子组件相互通信,可能大家的第一反应是$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语法糖的更多相关文章

  1. 在vue中使用jsx语法

    什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解 ...

  2. vue2使用组件进行父子互相传值的sync语法糖方法和原生方法

    原生方法:(事件名可以不在props通道里) 子类通过props通道绑定父类里data里的jjjjjj(@:fefefeff='jjjjjjjjjjjjj') 父组件通过监听fefeff事件来把子类传 ...

  3. Java中部分常见语法糖

    语法糖(Syntactic Sugar),也称糖衣语法,指在计算机语言中添加的某种语法,这种语法对语言本身功能来说没有什么影响,只是为了方便程序员的开发,提高开发效率.说白了,语法糖就是对现有语法的一 ...

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

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

  5. vue中通过.sync修饰符实现子组件修改父组件数据

    vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...

  6. Vue3.2中的setup语法糖,保证你看的明明白白!

    vue3.2 到底更新了什么? 根据原文内容的更新的内容主要有以下 5 块: 1.SSR:服务端渲染优化.@vue/server-renderer包加了一个ES模块创建, 与Node.js解耦,使在非 ...

  7. Vue中使用JSX语法

    一 项目结构 二 App组件 <template> <div id="app"> <fruit/> </div> </temp ...

  8. 【Java基础】Java中的语法糖

    目录 Java中的语法糖 switch对String和枚举类的支持 对泛型的支持 包装类型的自动装箱和拆箱 变长方法参数 枚举 内部类 条件编译 断言 数值字面量 for-each try-with- ...

  9. Java 中的语法糖,真甜。

    我把自己以往的文章汇总成为了 Github ,欢迎各位大佬 star https://github.com/crisxuan/bestJavaer 我们在日常开发中经常会使用到诸如泛型.自动拆箱和装箱 ...

随机推荐

  1. 【leetcode】Construct Binary Tree from Inorder and Postorder Traversal

    Given inorder and postorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  2. mysql编码

    Mysql中文乱码问题完美解决方案 修改查看MYSQL字符集(charset) MySQL 乱码之我见 10分钟学会理解和解决MySQL乱码问题 /etc/mysql/my.cnf /etc/init ...

  3. POJ3417Network

    Network Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 5311   Accepted: 1523 Descripti ...

  4. 【LeetCode】033. Search in Rotated Sorted Array

    题目: Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. ( ...

  5. Python:内置函数zip()

    zip函数接受任意多个可迭代对象作为参数,将对象中对应的元素打包成一个tuple,然后返回一个可迭代的zip对象. 这个可迭代对象可以使用循环的方式列出其元素 若多个可迭代对象的长度不一致,则所返回的 ...

  6. linux命令-vim一般模式下复制剪切粘贴

    删除光标后的一个字符 x 删除光标前的一个字符 shift+x 删除指定个数的字符 数字+x 删除一行字符 dd 剪切指定行数  数字dd  3dd 剪切3行 其实并没有删掉而是保存着剪切板里 粘贴在 ...

  7. 学习Web前端的好网站推荐

    说明:将其他技术技术网址也搜藏到下面,与君共同进步 1.Jquery专题 http://kb.cnblogs.com/zt/jquery/ 2.Entity Framwork专题 http://kb. ...

  8. [cf687c]The Values You Can Make(01背包变形)

    题意:给定n个硬币,每个硬币都有面值,求每个能构成和为k的硬币组合中,任意个数相互求和的总额种类,然后将所有硬币组合中最后得到的结果输出. 解题关键:在01背包的过程中进行dp.dp[i][j]表示组 ...

  9. Spring 框架学习整理

    JDBC操作数据库的基本入门中存在什么问题? *   导致驱动注册两次是个问题,但不是严重的. *   严重的问题:是当前类和mysql的驱动类有很强的依赖关系. *      当我们没有驱动类的时候 ...

  10. Luogu 3825 [NOI2017]游戏

    Luogu的spj现在挂了,要去其他OJ提交. 2-SAT 发现如果不考虑$x$的情况,这就成为一个2-SAT的裸题了,我们有$O(n + m)$的方法可以解决它. 那加上$x$的情况怎么弄……岂不是 ...