1.Vue系列
1.props
进阶图用到props主要是用来接收父组件传递而来的主面板数据，例如hasScale用于在父组件调用面板组件时，传递一个Boolean值告诉面板组件是否支持缩放。而progressData则是用来接收渲染面板的数据，要注意的是，父组件中的传递名称应该和子组件中的props中定义的名称一致。如下是关于props在进阶图中的应用。
props可以是数组或对象，用于接收来自父组件的数据。props可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。支持配置属性type：数据类型，default设置默认值，required是否必须，validator自定义验证函数。
main-panel:progressData="list"/main-panel
复制代码
props:{
//是否支持缩放
hasScale:{
type:Boolean,
default:false
},
//类型：只读（detail）或编辑（默认）
type:{
type:String,
default:
},
//主面板数据
progressData:{
type:Array,
default:function(){
return[]
}
}
},
复制代码
2.$emit
$emit用于向上派发事件并传递参数，通常配合props使用，以达到父子组件通信的目的。进阶图中是于父组件派发change事件，并传递this.bodyWidth,this.list两个参数。注意父组件在接收事件时应保持名称一致。
watch:{
list:{
deep:true,
handler(newVal,oldVal){
this.bodyWidth=this.list.length*+60+px
//派发事件
this.$emit(change,this.bodyWidth,this.list)
}
},
},
复制代码
--接收change事件--
main-panel
change="change"/main-panel复制代码
3.ref
ref在Vue中用于绑定组件，可以通过this.refs[绑定名称]或this.refs[绑定名称]或this.refs[绑定名称]或this.refs.绑定名称来获取组件实例对象，这有时非常有用。例如，当我们想要在一个组件中调用其子组件的某个方法或属性时，可通过这种方式调用。
--使用ref绑定面板组件--
main-panelref="mainPanel"/main-panel
复制代码
4.watch
watch是vue中被常用的api之一，用于监听数据，可以监听data中的数据，也可以监听props中的数据。
watch观察Vue实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受简单的键路径。对于更复杂的表达式，用一个函数取代。
进阶图中使用watch监听data中的面板数据list和props中的父组件传递下来的面板数据progressData。其中使用到了deep属性，表示是否进行深层次的内部值得监听。根据