这是我第一次写博客,主要是记录下自己解决问题的过程和知识的总结,如有不对的地方欢迎指出来!

需求:点击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的更多相关文章

  1. vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  2. 前台框架vue.js中怎样嵌入 Echarts 组件?

    目前常用的图标插件有 charts,  Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 cnpm 安装 Echarts cnpm i ...

  3. 微信小程序,内容组件中兼容的H5组件

    受信任的HTML节点及属性 全局支持class和style属性,不支持id属性. 节点 属性 a   abbr   address   article   aside   b   bdi   bdo ...

  4. 在自定义组件中获取spring底层组件

    要想在自定义组件中获取spring底层的各种组件,只需让自定义组件实现一系列接口即可,这些接口都是Aware的子接口.常见的有: 1. ApplicationContextAware——用于获取IOC ...

  5. 微信小程序将外部数据从父组件中传入到子组件

    小程序组件开发遇到一个组件内嵌两个组件,而这两个子组件所使用的数据来自于同一个API,如下图所示. 如果这时候两个子组件各自导入同一个接口就会显得多余.另外的办法是由父组件导入接口数据,再从父组件将接 ...

  6. vue项目中踩过的element的坑

    前言:在现在这种大的社会背景下,人们的需求更加的个性化了,而之前为了解放开发复杂的原生开发状态,现有的组件库已经远远不能满足人们高质量的需求了,这两天开发发现了一些element UI交互上的缺陷,当 ...

  7. unigui组件中client javascript delphi组件之间的操作

    UniLabel组件: function OnClick(sender, e){ MainForm.UniLabel1.setText('Click!');} function Onmousemove ...

  8. vue : history模式与项目部署的爬坑

    需求:url不能有#符号,且不放在服务器虚拟主机的根目录. 假设放在虚拟主机的 medicine 文件夹下. 需要改两个文件,一个是 ./config/index.js (vue设置文件) ,另一个是 ...

  9. vue项目中使用swiper插件遇到的坑

    <style scoped> .swiper-pagination-bullets  >>> .swiper-pagination-bullet-active {     ...

随机推荐

  1. 给大家分享下坐标转换的代码的JS和Python两个版本的源码【转】

    /** * Created by Wandergis on 2015/7/8. * 提供了百度坐标(BD09).国测局坐标(火星坐标,GCJ02).和WGS84坐标系之间的转换 */ /** * 百度 ...

  2. css 之单行文本显示省略和多行文本省略

    一.单行文本显示省略号...... overflow:hidden; white-space:nowrap; text-overflow:ellipsis; <!DOCTYPE html> ...

  3. 基于Vue的WebApp项目开发(五)

    实现图片分享列表 步骤一:新增图片列表文件photolist.vue <template> <div id="tml"> 图片分享页面 </div&g ...

  4. androidandroid中的通过网页链接打开本地app

    http://blog.csdn.net/zjlovety/article/details/54847980 <html> <head> <meta http-equiv ...

  5. oracle 帐号scott被锁定 如何解锁

    由于多次输入:账号 密码不对 oracle 帐号scott被锁定 如何解锁: 具体操作步骤如下:C:> sqlplus请输入用户名:sys输入口令:sys as sysdba //注意:在口令这 ...

  6. Python学习---网页爬虫[下载图片]

    爬虫学习--下载图片 1.主要用到了urllib和re库 2.利用urllib.urlopen()函数获得页面源代码 3.利用正则匹配图片类型,当然正则越准确,下载的越多 4.利用urllib.url ...

  7. 沉淀再出发:java中的equals()辨析

    沉淀再出发:java中的equals()辨析 一.前言 关于java中的equals,我们可能非常奇怪,在Object中定义了这个函数,其他的很多类中都重载了它,导致了我们对于辨析其中的内涵有了混淆, ...

  8. Android 手机 黑域

    黒域地址下载: http://pan.baidu.com/s/1bDYerc 连接手机,选择USB使用方式为“用作MIDI设备“ 0. (手机) 打开黑域,阅读向导1. (手机) 打开黑域,按屏幕提示 ...

  9. [EffectiveC++]item07:declare destructors virtual in polymorphic base class

  10. PDF文件如何转成markdown格式

    百度上根据pdf转makrdown为关键字进行搜索,结果大多数是反过来的转换,即markdown文本转PDF格式. 但是PDF转markdown的解决方案很少. 正好我工作上有这个需求,所以自己实现了 ...