脚本宝典收集整理的这篇文章主要介绍了Vue组件通过动态绑定对象更新后子组件百度地图视图无刷新的解决方式,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
组件的层级关系如图所示, 期望是点击气象设备组件的解析按钮将文本框的数据解析为气象对象(包含经纬度信息),并将该值传递给地图子组件,地图组件根据其经纬度信息更新位置锚点。
数据传递的方式采用对象动态绑定,即将所有的属性值进行向下单向传递。<DisplayMap v-bind:meteorologyVo="meteorologyVo"></DisplayMap>
地图子组件利用props进行引用:
props:{
meteorologyVo: Object,
}
锚点的HTML代码为:
<bm-marker :position="{lng: meteorologyData.longitude, lat: meteorologyData.latitude}"></bm-marker>
绑定后,点击解析按钮,地图子组件的锚点跑到了经纬度同为0的地方。
有两个层次的问题需要搞清楚:
ARow
<bm-marker-clusterer :averageCenter="true">
<bm-marker v-for="marker of markers" :key="marker.code" :position="{lng: marker.lng, lat: marker.lat}" @click="lookDetail(marker)" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
</bm-marker-clusterer>
data(){
markers: [],
}
曲线救国,利用数组的操作更新视图,数组的多种方法都可以让Vue实例对DOM进行重新渲染。
watch:{
meteorologyVo:/* 监听该对象的变化进行回调 */{
handler(val, oldValue){
console.log(oldValue);
let marker = {
code: 2,
lng: val.gpsVo.longitude,
lat: val.gpsVo.latitude,
}
this.markers.pop();
this.markers.push(marker);
},
deep: true
}
以上是脚本宝典为你收集整理的Vue组件通过动态绑定对象更新后子组件百度地图视图无刷新的解决方式全部内容,希望文章能够帮你解决Vue组件通过动态绑定对象更新后子组件百度地图视图无刷新的解决方式所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。