字节笔记本字节笔记本

Vue3 Element Plus Dialog的两次封装

2022-07-13

Vue3 Element Plus Dialog通过两次封装实现内部状态与外部状态的同步,使用`watch`和`emits`确保`dialogVisible`状态更新。

const emits = defineEmits('update:visible'])
const dialogVisible = ref(false)
watch(() => props.visible, (val) => {
  dialogVisible.value = val
})
const close = () => {
  emits('update:visible', false)
}
watch(() => dialogVisible.value, (val) => {
  emits('update:visible', val)
})

注意: 需要通过close 将内部状态正确的同步到外部状态