uni-app项目封装弹出层组件时遇到的问题

在uni-app项目的订单模块中，订单详情页有取消订单的按钮，会弹出取消订单的弹出层；在订单列表页也有取消订单的按钮，为了提高代码的复用性，将取消订单的弹出层封装成一个组件，在需要时引入使用。

一般打开弹出层是获取弹出层的ref实例后通过open()打开，但是这里如果用这种方法，即使行得通，也比较麻烦，因为要先获取弹出层组件的实例，通过实例对象再获取组件内部的ref的open方法，因此这里我通过一个变量来控制弹出层是否打开，在组件内部监听该变量的值，为true时打开弹出层。

这样写对于订单详情页的取消订单事件是可以实现的，但对于订单列表页，就会出现问题。

因为订单列表页设计到多个订单状态列表的显示，每个状态的列表是个封装好的组件，将取消订单弹框放在其中就会出现一个问题：每次点击取消订单的按钮，控制是否显示弹框的变量为true，弹框就出现了，但是五个列表都会出现该弹框。

此时关闭一个弹出层后其他列表的弹框依旧显示着，所以要修改一下watch的内容，当监听到一个弹框关闭时就会将其他弹框也关闭。

至于弹出层会出现多次，为什么不直接把它放到外部组件中呢？

因为取消订单涉及到获取订单的编号，以及取消后更新订单信息，如果放到父组件中，还需要从子组件中获取编号和订单信息，通过ref获取子组件中暴露出来的值，但获取到的ref是个数组，无法得知要获取的是其中哪个ref的信息，因此不采用这种方法。

--------------------------------------------------------------------------------------------------------------

后面尝试了通过弹框的ref的open方法，结果发现也同样可以实现，而且比用变量控制简单很多，不需要监听变量的值了，因为每次点击取消订单的按钮，打开的弹框是当前状态的列表的弹框，跟其他状态的列表是独立开来的，不会互相影响。