.sync修饰符

.sync 修饰符其实是个双向绑定的语法糖,一般用于“双向绑定”props的时候,类似v-model

比方说,elementui中的dialog组件,它有个prop 叫visible,在使用该组件的时候,我们希望点击dialog 右上角的x号,或者点击遮罩层,隐藏dialog。但是我们没法在子组件去直接修改父组件绑定visible属性的变量,按照规则,我们需要在dialog里$emit一个事件,然后在父组件的处理方法中去修改该值,但是这样写太麻烦了,因此,我们使用了.sync修饰符,然后约定子组件使用$emit('update:visible',false),让父组不用写处理方法就可以修改绑定visible属性的变量。

<!-- 父组件 -->
<template>
<div>
      <el-dialog :visible.sync="dialogVisible"></el-dialog>
<div>
</template>
<script>
export default {
      data(){
            return {
                  dialogVisible: true
            }
      }
}
</script>
<!-- 子组件dialog -->
<template>
<div @click="handleClose">
      
<div>
</template>
<script>
export default {
  methods: {
    handleClose(){
      this.$emit("update:visible", false);
    }
  }
}
</script>
posted @ 2020-10-26 15:58  镇魂帆-张  阅读(463)  评论(0编辑  收藏  举报