vue 手动/局部刷新组件-白红宇

vue 手动/局部刷新组件

阅读量：787 次

发布时间：2019-03-24

本文共 275 字，大约阅读时间需要 1 分钟。

使用场景

当需要在点击按钮或某变量发生变化时，在不刷新整个页面的情况下，局部刷新（重绘）图表或重新加载子组件时，以下方案可以有效实现。

实现方案

在需要局部刷新的组件上，可以通过以下方式实现：

在组件的data选项中，将show的默认值设置为true，以便第一次渲染时组件能够正常显示。

当点击事件发生时，首先将show变量设置为false，随后在this.$nextTick周期中，将show变量设置回true。这样可以在不触发浏览器刷新的情况下，重新渲染目标组件。

完整的范例代码

父组件：

子组件 test1：

转载地址：http://sqmkk.baihongyu.com/

你可能感兴趣的文章

Openlayers实战：选择feature，列表滑动，定位到相应的列表位置

Openlayers实战：非4326,3857的投影

Openlayers高级交互（1/20）：控制功能综合展示（版权、坐标显示、放缩、比例尺、测量等）

Openlayers高级交互（10/20）：绘制矩形,截取对应部分的地图并保存

Openlayers高级交互（11/20）：显示带箭头的线段轨迹，箭头居中

Openlayers高级交互（12/20）：利用高德逆地理编码，点击位置，显示坐标和地址

Openlayers高级交互（13/20）：选择左右两部分的地图内容，横向卷帘

Openlayers高级交互（14/20）：汽车移动轨迹动画（开始、暂停、结束）

Openlayers高级交互（15/20）：显示海量多边形，10ms加载完成

Openlayers高级交互（16/20）：两个多边形的交集、差集、并集处理

Openlayers高级交互（17/20）：通过坐标显示多边形，计算出最大幅宽

Openlayers高级交互（18/20）：根据feature，将图形适配到最可视化窗口

Openlayers高级交互（19/20）：地图上点击某处，列表中显示对应位置

Openlayers高级交互（2/20）：清除所有图层的有效方法

Openlayers高级交互（20/20）：超级数据聚合，页面不再混乱

Openlayers高级交互（3/20）：动态添加 layer 到 layerGroup，并动态删除

Openlayers高级交互（4/20）：手绘多边形，导出KML文件，可以自定义name和style

Openlayers高级交互（5/20）：右键点击，获取该点下多个图层的feature信息

Openlayers高级交互（6/20）：绘制某点，判断它是否在一个电子围栏内

Openlayers高级交互（7/20）：点击某点弹出窗口，自动播放视频