在父页面中,子组件外层增加一层div,添加v-if属性,这样可以延迟加载子组件,在点击时给v-if属性设置为true时才进行加载。
       注意,只在子组件el-dialog的外层增加带v-if属性的div是不够的,因为这个v-if只对内部的el-dialog有作用,script代码是在子组件加载时就执行了,而这时的子组件还没有从父页面获取传值,所以会报错。
       在子组件el-dialog的外层增加带v-if属性的div,可以解决mounted只执行一次的问题,div中以v-if来控制组件el-dialog的出现与否,组件el-dialog出现,就会再执行一次mounted中的方法。
 
父页面:
 
子组件:
 
       查询官网文档可知, v-if和v-show都是用于根据条件展示元素的指令。
       不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
       v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
       v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
       相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
       一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
 
最后修改于 2020-02-13 22:43:19
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付
上一篇