需要跨组件传值的新需求,分享思路【随记】

昨天晚上帮朋友改了一下代码,主要知识点涉及兄弟组件传值,分享一下思路。

需求:table栏中末尾行同时有查看支付记录两个弹框组件,在父组件中时,无论点击哪一个,都需要单独弹窗,同时,当点击查看时,查看的弹窗内有个按钮,点击后需要弹出支付记录的弹窗。

我拿到代码的时候,已经可以在父组件中点击任意按钮进行弹窗了,但是需要写一下通过子组件控制另一个子组件的弹窗显隐的变量。

思路:刚开始的思路是通过查看按钮里面的一个变量,兄弟间传值传给支付记录的组件,然后展示弹窗,然后在支付记录的弹框中

问题1:关闭时把值传回去,传回去以后查看中的值变化成了false,第二次点击时无法弹框。

解决问题1:将$emit中传过去的值写死为true,兄弟组件中监听一下,变化时为true时,展示,否则的话关闭。

问题2:此时又出现一个问题,依然是只能打开一次,因为在接收值的地方,监听到的一直都是true,所以只能第一次正常打开和关闭,第二次开始由于首次已经赋值为true,所以监听器监听不到第二次开始时传入值的变化了。



解决问题2:如果大家是跟着我的思路再思考的话,基本完犊子了,这个弹窗是走不出来第二圈的。

在阳台抽烟的时候,突然发现根本就不该兄弟间控制显隐状态,只要父组件控制支付的显隐状态即可,所以这个流程应该是  

父组件中声明变量,默认值为false并监听该属性

当该属性发生变化时,传入至立即支付的弹框中,进行显隐控制,当关闭立即支付弹框时,通过$emit改变一下父组件中的显隐变量,此时父组件监听到该变量的变化,并将新的值赋值,

当点击查看组件的支付记录按钮时,将true传入父组件,父组件再通过prop传给支付记录弹窗,弹窗关闭时,改变父组件的变量值为false。

到这里问题已经彻底解决了,踩了一个思路上的坑

如果大家有更好的想法,欢迎讨论。

猜你喜欢

转载自blog.csdn.net/guojixin12/article/details/130571844