element-plus中el-dialog导致props报错问题解决

1、报错信息

[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes

error Unexpected mutation of “detailVisible” prop vue/no-mutating-props

2、报错场景

当我们在开发 vue3 项目搭配 element-plus 时，要使用 el-dialog 组件时，可能很多小伙伴是从 vue2 + element-ui过来的，因此在使用的时候会将 visible 控制显示的参数通过父组件传递进来，导致上面的报错。

tips：因为element-plus 删除了 visible 属性，因此这里要用 v-model，否则会报 el-dialog 组件上找不到 visible 属性的错误，即：[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes。

3、分析原因

因为 visible 现在用 v-model 绑定的，虽然 vue 有双向绑定 v-model，vue 父子组件之间数据传递，仍然还是遵循单向数据流的，父组件可以向子组件传递 props，但是子组件不能修改父组件传递来的 props，子组件只能通过事件通知父组件进行数据更改。

因此这里如果从父组件修改 visible 的值，程序可能会判定你的 visible 属性可能在子组件修改，破坏了单向数据传递，因此会报错：error Unexpected mutation of “detailVisible” prop vue/no-mutating-props。

4、解决方案

将 visible 属性定义在子组件中，之后通过 defineExpose 这个勾子函数暴露出 open 方法，之后父组件通过 ref 调用 open 方法解决。

------ 子组件 ------
<template><el-dialog v-model="dialogVisible"><div>test</div></el-dialog>
</template><script lang="ts" setup>
import { ref } from 'vue'
const dialogVisible = ref(false)const open = () => {dialogVisible.value = true
}defineExpose({ open })
</script>

------ 父组件 ------
<template><SonDialog ref="sonRef"></SonDialog>
</template><script lang="ts" setup>
// 从vue中引入函数以方便获取当前组件的实例和上下文ctx
import { getCurrentInstance } from 'vue'
import SonDialog from './SonDialog'
// 调用函数，获取当前组件的实例proxy，这里的proxy类似于vue2中的this
const { proxy } = getCurrentInstance()
const openDialog = () => proxy.$refs['sonRef'].open()
</script>