欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于vue modal的那些事 vuejavascriptmvvm

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

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

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

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