关于vue modal的那些事

最近这几天用vue开发遇到这么一个事，需求是要做一个选择用户的弹出窗层，这个窗口会被多个地方调用，但返回的值需要塞到不同的地方。
通俗做法：封装一个普通的层组件，由于需要组件外层和组件内部都能控制显示和隐藏组件，所以就要实现组件之间的通信。要实现该功能第一反应是：

第一种方案：
调用弹出层的组件里引入该组件通过使用
属性和事件进行父子组件的通信，但是这样导致的后果是会在html中生成多个弹出层片段，而且生成的代码插入的位置比较深，会导致遮罩层会盖不到全部。（比较郁闷）于是想到

第二种方案：
将这个组件放到最外层（body元素下面）用vuex中的store 在state中建立一个变量来实现多组件之间的通信。这样做很好的解决了上面的问题，但是这样导致了组件里面要和store进行通信，这样就直接导致这个层组件耦合度变高了，移植起来就不方便了更没办法封装成业务组件了。于是抓耳扰腮出来了

第三种方案：
回归本真，使用ref属性并在组件内部封装显示和隐藏方法，并在调用时可传入回吊函数，提交选中记录时将选中的记录作为回吊函数的参数传出来。一下子万事大吉，既方便了移植又降低了耦合。可是我并不觉的有什么成就感，因为这种方式在mvc的架构中在平常不过了，如果在vue中使用这种方式简直就是历史的倒退。可是没办法事实证明这种方式时最能达到我的要求的。
总结：也是这就是所谓的没有最好，只有最合适吧！