改bug日常：Vue3项目Unexpected mutation of “isShowDrawer“ prop报错

问题背景： 使用vue3+element plus，用到drawer组件时，需要父组件props传递值去控制drawer组件显隐。这个时候出现问题：Unexpected mutation of "isShowDrawer" prop

问题原因： 这个问题的大致意思是说不允许在子级修改父级的数据，这里涉及到了vue3的单向数据流，由于关闭drawer时，是在子组件内修改了父组件的状态，所以违反了单向数据流规则。

解决方法： 在子组件里自定义事件，在子组件需要改变父组件状态时，emit发射事件通知父组件。

父组件：

<template>
  <div class="drawer">
    <info-drawer :is-show-drawer="isShowDrawer" @update:is-show-drawer="updateShowDrawer" />
  </div>
</template>

<script setup lang="ts">
const isShowDrawer = ref(false)

// 控制子组件drawer的显示
const infoFunc = () => {
  isShowDrawer.value = true
}
// 接收从子组件发出来的事件  并更新组件状态
const updateShowDrawer = () => {
  isShowDrawer.value = false
}
</script>

子组件：

<template>
  <div class="info-drawer">
    <el-drawer :model-value="isShowDrawer" title="I am the title" @close="close">
      <span>Hi there!</span>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
// 接收父组件传来的控制drawer显隐的属性
const props = defineProps({
  isShowDrawer: Boolean
})
// 自定义事件
const emits = defineEmits<{
  (e: 'update:isShowDrawer'): void
}>()

// drawer关闭时发出事件提醒父组件更新drawer状态
const close = () => {
  emits('update:isShowDrawer')
}
</script>