时间:2021-05-26
需求:点击btn,弹出modal显示图表(以折现图为例)
这应该是很基本的需求也是很容易实现的,代码和效果如下:
代码解释:setTem是一个方法,改变modal为true,默认为false ; chart-line是图表子组件,通过data向其传递参数,data绑定的数据是父组件mounted后拿到的数据
效果图:点击btn后的确显示了modal框,但是里面的图表不能显示,接着改变子组件任何代码,迫使重新编译子组件,则子组件的图表可以正常显示
分析:当点击btn时,modal框的确弹出来了,但推测其底层是使用v-show来实现显示与否,所以改变modal为true或fasle只是改变了样式的显示与隐藏,所以不会触发子组件的重新编译,父组件在mounted前,已经准备好了所有的视图,包括子组件的视图,只是这个时候由于modal的v-show=false,不能被观察到罢了。但是此时传给子组件的数据并没有拿到,所有子组件不能显示图表;当点击btn的时候,虽然此时父组件传给子组件的数据拿到了,但由于是通过v-show改变显示与否,子组件不会重新编译,当然不会去读取数据,就不会显示
解决办法:当点击的时候显示的促使子组件编译,给子组件套一个v-if,代码如下:
效果图:当每次点击的时候都会重新编译子组件,所以子组件在每次编译的时候都能拿到数据,自然能正常显示
总结:以上是对vue中使用iview的modal组件解决的一个小问题,推测其使用的是v-show来控制弹出层的显示与否,当子组件不是简单的显示基本信息而是要更新数据时就需要显示的促使其重新编译,否者数据无法得到更新。
以上所述是小编给大家介绍的vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
1-封装模态框组件Mydialog(样式可以自己写)>{{modal.cancelButtonText}}{{modal.confirmButtonText}}
除了默认设置的核心指令(v-model和v-show),Vue也允许注册自定义指令。在Vue里,代码复用的主要形式和抽象是组件。然而,有的情况下,仍然需要对
在最近的项目中,使用了bootstrap-vue来开发,然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果,像alert、modal等组件每
微信小程序modal:这里对微信小程序中modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点。modalmoda
前言vue.js的UI组件库,在git上有多个项目,我见的使用者比较多的是iView和Element.两个组件库,组件都很丰富。官网的介绍iView:一套基于V