使用echarts的vue项目第二天,vue子组件中引用echarts实现简单联动(适合没接触过的echarts的新手)
vue子组件套用echarts实现联动遇到的坑
首先道个歉,网购的劣质24k曲面显示屏烧坏了电源,影响了更新进度,导致今天只能实现最基础的一个联动例子.
-
vue子组件
首先,引入了vue和echarts,可以new 一个vue的对象和造出一个echarts的表格,这是昨天做到的.今天的目的就是用vue的组件功能和生命周期实现简单联动.
目的是要点击不同的按钮,来切换不同的表格,如果点个按钮造个dom元素放表格,那样会成为页面卡顿,报错的原因.
vue的组件功能有一个很强的能力,那就是只需一个dom元素和一段js数组,改变js数组,dom元素里面内容自动跟着变.这个强无敌的dom元素就叫做vue组件,先把召唤echarts的js代码注释掉,来看vue的组件功能
官网简单粗暴的例子:
具体怎么运用,官方没细说,但给了几句逻辑性的帮助:
老师教会了1+1,我们就要自己去学10+10,来看下常用组件例子:
html:
图片很复杂,驱于良心在下只好分布说明,
①,在"body"中创建template标签模板.
②,创造组件按钮,给每个按钮配备自己需要展示组件的组件名称.
③,定义展示组件的盒子
④,js中定义组件,定义组件名称,必须和组件按钮里面的组件名称一致
⑤,在app(最大的vue盒子)里加载自己定义的组件,最好设置默认展示的组件 - vue生命周期
这样组件就造好了,而且可以根据四个按钮来回变换四个组件内容,那接下来就要把echarts的表格放到组件里了.
解除echarts的封印你会发现,表格没了.仔细一想才知道,你有四个组件,相当于四个独立的盒子,也就是说,外部的js想要管教组件里的内容有诸多的限制.
那怎么办呢?其实很简单,只要把外部的js复制到组件内部即可.vue强大的组件功能,为我们提供了8个方法,也就是所谓的钩子函数,也叫生命周期.
先上官方图片:
在我看来,vue的生命周期和斗地主有点像,以下均是个人看法(如有异同,纯属娱乐):
他为什么又叫钩子函数,举个例子,发牌前,你突然发现不对劲,叫住发牌员,让他先扣三张牌到桌子上当底牌,这个叫住发牌员让他执行另外一个动作再发牌就像钩子一样,钩过来一个函数再执行.
就好比王者荣耀后期了,你们本来都在草里蹲着,突然钟馗勾过来一个人,你们只好先暂停打团,开始锤那个钟馗勾过来的人.
我们只需要在挂载结束(mounted,相当于页面创建完毕,刚造好盒子)的时候,把准备好的echarts的js代码调过来就行了.