在 elementUI 和 element-plus 中 Dialog 的 简单分析_elementui plus

本篇主要探讨 Dialog 的 显示隐藏 的区别

vue2中 .sync 在elementUI(2.15.6) Dialog 中的应用

Dialog 是否显示 是通过 visible 控制的，并且支持 .sync 修饰符
在使用Dialog时 我们一般会这样写

  <!-- Test.vue-->
  <CustomDialog :visible.sync="isShow" />

  <!-- CustomDialog.vue-->
  <template>
    <el-dialog title="tips" v-bind="$attrs" v-on="$listeners" @open="handleOpen"  @close="handleClose">
      <xxx></xxx>
    </el-dialog>
  </template>
  <script>
  export default {
    methods: {
      handleOpen () {
        // 对话框展示 初始化数据
      },
      handleClose () {
        this.$emit('update:visible', false)
      }
    }
  }
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

正常情况下我们需要在 CustomDialog 的 props选项里添加 visible属性，但这里我们在 el-dialog 上使用了 v-bind=“$attrs” 选项，此时就会把 visible 以 attrs 方式传递给 Dialog
我们可以打开 Dialog 源码 /element-ui/packages/dialog/src/component.vue
在它的文件里我们发现只是使用了 visible 并对 visible 进行了监听，那这个 visible 是在哪接收的呢？
其实是通过 mixins 混入到 props 中的
可查看这个文件 import Popup from ‘element-ui/src/utils/popup’;
在 Popup 的 props 选项里 有对 visible 进行定义

注意：我们在 el-dialog 上定义的 v-bind=“$attrs” 是必须要写的，即便 CustomDialog.vue文件的根元素时 el-dialog，因为在vue2.0中未被 props 接收的属性不能自动透传到 孙组件内

vue3 v-model 在 element-plus(2.2.17) Dialog中的应用

因 vue3 去除了 .sync 修饰符。此时 Dialog 是否显示 是通过 model-value / v-model 来控制的，现在Dialog源码和之前也不一样，现在我们的写法是：

  <!-- Test.vue-->
  <CustomDialog v-model="isShow" />

  <!-- CustomDialog.vue--> 
  <template>
    <el-dialog title="Tips" @open="handleOpen"  @close="handleClose">
      // ...
    </el-dialog>
  </template>

  <script lang="ts" setup>
  const emits = defineEmits(['update:modelValue'])
  const handleOpen = () => {
    // 对话框打开-初始化数据
  }
  const handleClose = () => {
    emits('update:modelValue', false)
  }
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

正常情况下我们需要在 CustomDialog 中定义

  const props = defineProps(['modelValue'])
1

并通过在 el-dialog 上添加

  <el-dialog v-model="modelValue" ...></el-dialog>
  或
  <el-dialog :modelValue="modelValue" ...></el-dialog>
1
2
3

传递给 Dialog，但这里我们什么都没写，但对话框还是可以正常显示隐藏,其实正是因为 props 未定义 modelValue 选项，所以此属性会 自动透传 到子组件上，而 el-dialog内部的 props 上又定义了 modelValue 值，所以就可以接受到了

注意：如果我门在 CustomDialog 中定义 modelValue 但在 el-dialog 组件上又不写该属性，则此时 modelValue 不会透传到Dialog内，也就无法控制对话框的显示和隐藏

我们可以打开 Dialog 源码 /element-plus/packages/components/dialog/src/dialog.vue
我们会看到 import { dialogEmits, dialogProps } from ‘./dialog’
props 的定义都在 dialogProps 文件内，打开 dialogProps 文件，我们会发现有对 modelValue 的定义

注意：当 子组件 的 根组件 又是一个 组件(孙组件) 时，则 子组件 接收的 透传属性 会直接传递到这个 组件(孙组件) 内