vue中.sync 修饰符

时间:2020-12-14 19:24:51

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

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

vue中.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修饰符了呢!

  

相关文章