Vue组件iview Modal显示与改写，如何避免常见坑？

本文共计655个文字，预计阅读时间需要3分钟。

需求：点击btn按钮，弹出modal显示图表（以折现图为例）。这是一个基本的需求，也是很容易实现的，代码和效果如下：

代码解释：+ setTem是一个方法，用于将modal设置为true，默认为false；+ chart-line是折线图的意思。

需求：点击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,不能被观察到罢了。