zoukankan      html  css  js  c++  java
  • vue中.sync 修饰符

      一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”。

      正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是用来控制是否显示Dialog的,后面特意强调了支持.sync修饰符。

     

      所以,此时再次看到.sync修饰符,就会想到这个Dialog,那么必然不能放过了,正好好好研究一下.sync修饰符的用法。

      vue官网关于.sync:

    在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。
    

      这说明在某些情况下数据传递需要“双向绑定”,但又不能为了这些少数情况,而导致多数情况的数据维护困难,所以就“推荐以 update:myPropName 的模式触发事件取而代之”,此时父组件就会稍显麻烦,需要先绑定数据v-bind,然后监听v-on:update:myPropName,为了父组件使用上的方便,vue于是为这种模式提供了.sync修饰符,也就是说父组件直接使用:myPropName.sync传递数据,子组件使用this.$emit("update:myPropName",myPropValue),就实现了部分情况下的父子组件的数据双向绑定。

      通过具体代码实现一遍比较具象:

      父组件: 

    <modal-stop title="附加设备停用" :dialogVisible.sync="visible" @confirm="stopDevicesConfirm"/>
    

      子组件是一个Dialog,那么点击“取消”按钮时,其实也就是一个操作——关闭弹窗,那么此时如果能够不需要在每一个父组件当中定义:this.visible=false,肯定会很happy,这就需要.sync修饰符来帮忙了。

      父组件已经定义  :dialogVisible.sync="visible",

      那么子组件当中: this.$emit("update:dialogVisible", false);   这里的dialogVisible就是我们自定义的属性名称,也就是myPropName,emit传递回去的false也就是需要在点击“取消”按钮之后,需要将visible修改成的值。

      是不是能够理解.sync修饰符了呢!

      

  • 相关阅读:
    01背包问题
    数据库并发的问题
    NGINX
    代理模式(静态代理)
    桥接模式
    组合模式
    jmeter-xpath Assertion断言
    jmeter-xpath Extractor 使用
    jmeter-html链接解析器使用
    js-浏览器对象
  • 原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/10120043.html
Copyright © 2011-2022 走看看