从element-ui的dialog组件看mixin混入选项和sync修饰符

查看dialog源码会发现其visible属性没有直接定义在组件代码中，查找器混入选项发现其混入了popup，原来element-ui把弹出的一些弹出类别的抽出来做成了popup，然后混入到各个弹出组件中，类似于一个基类。然后调用时visible属性加入了sync修饰符，根据vue 2.3.0的文档解释sync是一个语法糖。
:visible.sync="dialogVisible" 等效于:visible="dialogVisible" @update:visible=v=>this.dialogVisible = v

## dialog源码 element-ui/packages/dialog/src/component.vue
<script>
...
 methods: {
    ...
      hide(cancel) {
        if (cancel !== false) {
          this.$emit('update:visible', false);
          this.$emit('close');
          this.closed = true;
        }
      }
      ...
     }
...
</script>

## el-dialog使用
<el-dialog  title="提示"  :visible.sync="dialogVisible"  width="30%"  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

与此类似， v-model也是类似的一个语法糖...

参考

1. 博客园-卫子鱼-SYNC分析之为啥EL-DIALOG中的VISIBLE需要使用.SYNC
2. CSDN-R-H-R-如何理解v-model的实质为语法糖
3. cn.vuejs.org/v2/guide/co…