在Vue中将echart封装为可复用组件

Posted 2023-04-24

参考技术A 首先在项目中安装echarts
npm install echarts --save

1.动态设置id。为什么是动态，id是唯一的，这不用多说吧。

2.引入echarts
const echarts = require('echarts')
3.上面说过了id是唯一的，使用echarts.init这个方法来创建一个 ECharts 实例，返回 echartinstance，不能在单个容器上初始化多个 ECharts 实例,因此需要用到Vue的computed属性来解决这个问题

4.因为把它封装成了一个Vue组件,父子组件之间的通信需要用到props这个属性

5.封装echarts。

6.在Vue的生命周期mounted执行，并且在this.$nextTick里面执行这个方法，保证承若所有的子组件被挂载、能保证通过获取到组件

注意：
在父组件中调用子组件，如果是通过ajax获取的数据，需要在引入组件是判断一下数组或对象是否为空。

Vue项目中使用elementUI之Pagination分页组件的二次封装复用

参考技术A elementUI中的组件本身是已经经过封装的便于开发，但是由于项目使用次数过多，为了更简便的统一使用将其进行封装复用。

初学者可参考官方文档学习简单示例