vue一次点击十个弹窗，屏幕都干黑了！！！

废话不多说，直接上代码，请看示例

// 父组件模板
 <button  @click="onClick">子组件弹窗</button>
 <!-- 子组件 -->
 <AddAccount :row="scope.row" :is-click="isFatherClick" />

// 父组件js
const isFatherClick = ref(false);

function onClick() {
   isFatherClick.value = !isFatherClick.value;
}

// 子组件模板
<el-dialog
    v-model="showDialog"
>
</el-dialog>

// 子组件js
const props =defineProps({
    isClick: {
        type: Boolean,
        default: false,
    },
})

watch(() => { return props.isClick }, () => {
    showDialog.value = true;
});

大家一看这个逻辑有没有问题？在父组件里点击子组件弹窗时，弹出相应的对话框进行下步操作，貌似没有问题。 这是笔者本周接手别人的一个项目本地调试一看也没有问题，结果上staging环境一跑问题就来了！！！一点击按钮屏幕就黑了！原因是一下弹了十个窗。。。嘿，有点意思，本地再调试，没有问题，一看弹窗逻辑，似乎也没问题，那问题出在哪呢？

有经验的朋友看到这里肯定想到了棘手的地方在于本地没问题，只要在本地能复现那还不是轻轻松松解决😁 于是我开始比对本地和staging环境的区别，喔，本地用的是mock数据，但是只配了一条，而staging环境是有很多数据的，相信有经验的大佬看到这里早已知道原因所在了。笔者小菜，还是用Apifox自己mock了数据才反应过来。不知大家有没有注意到代码的这块:row="scope.row，子组件其实是在一个Element Plus的Table里的，所以展示了多少条数据，就相当于初始化了多少个子组件，这里的问题在于开发者把所有的子组件的弹窗交由了一个共同的父组件变量来控制，所以在一条数据的时候看不出来问题，但是数据一多就出现了同时多个弹窗的问题。

解决的办法也很简单，就是把弹窗的控制变量交由每个子组件单独维护，把子组件弹窗按钮写在子组件内部，然后向父组件暴露。

其实这个问题只是犯了没经验的错误，写下这篇文章就是提醒自己和帮助看到的萌新们避免踩坑，笔者也是小菜，觉得有问题的地方欢迎留言评论哦👏🏻👏🏻 喜欢的点个赞和收藏呗🎉🎉🎉