vue 组件 组件复用
页面中多次引用同一弹窗组件，每次点击都会弹出弹窗，怎么能每次点击页面只留一个弹窗？代码如下
index.vue
import commontPage from '../common'
import commontPage1 from '../common'
<commontPage></commontPage>
<commontPage1></commontPage1>效果如图
按钮和弹窗都在组件里
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
思路是把弹窗打开的状态的控制权往上层组件提，有很多实现方案
一种参考解决方案：
每个组件添加一个open-id 属性和一个opened事件，在当前页面 open-id 绑定 OpenedId,
在组件内部watch open-id属性的变化，如果和当前组件的id 不相等，关闭当前但弹窗，如果相等，打开弹窗，
在点击按钮的时候，出发 opened 事件，传出点击按钮组件的id，当前页面的事件处理函数 改变OpenedId 的值
希望对你有用,
如果解决问题，请采纳，写答案不易