vue 多次调用同组件 内部echart只渲染一次

有一个7天预报的组件，内部是一个echart的曲线图，很多个页面都会调用，第一个页面正常渲染，其他则无效

原始代码

<div class="czwf-col3-main width100 height100" id="forcLineChart2"></div>

myChart7day = echarts.init(document.getElementById("forcLineChart2"));

修改代码

<div class="czwf-col3-main width100 height100" ref="forcLineChart2"></div>

myChart7day = echarts.init(this.$refs.forcLineChart2);

原本使用id注册，id="forcLineChart2"，作用于dom元素上，同一个父页面可以多次调用，vue又是单页面应用，会作用于原来的dom，更换父页面后，则无效，无法渲染。

使用ref则是vue专门针对组件，查找注册信息的，就指向当前组件的实例。

坑了大半天。。。哎

这篇好文章是转载于：学新通技术网