v-show应用于vue组件中iview的模态组件爬坑问题的模态显示

需求：点击btn，弹出模态显示图(以折扣图为例)

这应该是一个很基本的要求，很容易实现。代码和效果如下：

代码说明：setTem是一个将模态改为true，默认为false的方法；图表线是一个图表子组件，参数通过数据传递给它。由数据绑定的数据是在装载父组件后获得的数据

效果图：点击btn后，显示模态框，但无法显示里面的图表。然后，更改子组件的任何代码，强制子组件重新编译，子组件的图表就可以正常显示了

分析：点击btn时，确实会弹出模态框，但推测底层是用v-show显示的，所以将模态改为true或fast只改变样式的显示和隐藏，不会触发子组件的重新编译。父组件在装载之前已经准备好了所有视图，包括子组件的视图，但是此时无法观察到它，因为modal=false的v-show。但是此时并没有获取发送给子组件的数据，所有子组件都无法显示图表；当点击btn时，虽然此时获得了从父组件传输到子组件的数据，但是子组件不会被重新编译，因为显示是通过v-show改变的。当然，数据不会被读取，也不会被显示。

解决方案：单击时，它会提示子组件进行编译，并为子组件设置一个v-if。代码如下：

渲染：每次单击子组件时都会重新编译它们，这样子组件每次编译时都能获得数据，自然它们就能正常显示

总结：以上是在vue中使用iview为模态组件解决的一个小问题。推测v-show是用来控制弹出层的显示。当子组件不是简单地显示基本信息而是更新数据时，需要显示它以使它重新编译。否则，数据无法更新。

以上是边肖介绍的vue组件中iview模态组件爬坡问题的模态展示。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！