saber框架初步认识-自定义组件-图表组件

组件是可以扩展 HTML 元素，封装可重用的代码。定义的组件可以拥有所有vue实例的特性。组件之间也是可以嵌套的。

组件是Vue.js最强大的功能之一，它可以扩展HTML元素，封装可重用的代码，通过传入对象的不同，实现组件的复用。

组件分类：局部组件和全局组件。

全局组件和局部组件的区别：

1.使用范围
全局：可以在页面中任何位置使用。
局部：只能在定义它的父组件中使用，不能在其他位置，否则就会失效。

2.定义方法
全局：可以使用Vue.component（组件名称，options）定义。
局部：可以通过Vue实例中component属性定义局部组件。

import lineChart from "./components/line-chart/main";
//注册全局容器
Vue.component("lineChart", lineChart);

3.是否挂载
全局组件在扩展元素用于封装复用代码时不需要挂载，但是不常见，因为会影响浏览器的性能
局部组件必须手动挂载，否则会失效。
 

组件之间的传值
1.子组件向父组件之间传值（事件派发）

//子组件


<el-button @click='addnum'>
加法
</el-button>
methods(){
    addnum() {
             this.num += 1;
            // 参数一表示事件名字
            // 参数二表示传递的参数
            this.$emit("addres", this.num);

    }


}

//父组件

<p @addres='addres' >{
  {this.num}}</p>
methods(){

    addres(value){

       this.num = value;
    }

}

2.父组件向子组件之间传值（props）

//父组件
<line-chart :chartObj='chartObj1' :height='heights'></line-chart>

 data() {
      re