一次 Vue 中 sync 和 $emit 的套娃

需求：基于 element-ui 的 Dialog 组件二次封装

Dialog.vue

<template>
  <el-dialog
    :visible="visible"
    @close="$emit('update:visible', false)"
    :width="width"
  >
    <!-- 头 -->
    <template #title>
      <span class="_label">{{ title }}</span>
    </template>

    <!-- 内容区 -->
    <slot />

    <!-- 尾部 -->
    <template #footer>
      <slot name="footer" />
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    visible: { type: Boolean, default: false },
    title: { type: String, require: true },
    width: { type: String },
  },
};
</script>

<style scoped lang="stylus">
// 一些没什么用的样式重置
line = 1px solid rgba(0, 0, 0, 0.09)
>>> .el-dialog__wrapper
  display flex
  justify-content center
  align-items center
  .el-dialog
    margin 0 !important
    max-height 90%
    overflow-y hidden
    display flex
    flex-direction column
  .el-dialog__header
    padding 16px 24px 0
    border-bottom line
  .el-dialog__body
    padding 24px
    flex 1
    overflow-y scroll
  .el-dialog__footer
    padding 24px
    border-top line
</style>

官方文档中 :visible.sync="visible" 使用了 .sync修饰符，但当我们是二次封装的时候，使用起来像是这样

业务组件A.vue

<template>
  <Dialog
    width="30%"
    title="新增用户"
    :visible="visible"
    @update:visible="$emit('update:visible', $event)"
  >
    <h1>这是一些内容</h1>
    <template #footer>
      <Button grey @click="visible = false"> 取 消</Button>
      <Button blue @click="visible = false"> 确 定</Button>
    </template>
  </Dialog>
</template>

可以使用
v-bind=“$attrs"v-on="$listeners”