组件
vue支持自定义组件，用户可以根据自己的需求封装一个公共的组件，实现
组件的复用。
一个单独的vue文件就是一个组件。组件的注册 分为全局注册 和 局部注册。
import Vue from 'vue'
import editView from './rateCardEdit.vue';
Vue.component('editView', editView)
全局注册后，在任意组件中可以使用 'editView'组件，使用方法为
<editView></editView>
import regionTree from '../../components/regionTree';
export default {
components: {
regionTree,
},
data() {
return {
regionInfo: {},
}
},
}
局部注册，在父组件中 通过 components: regionTree 注册使用。
组件Props
props 是组件中重要的一个选项，起到父子组件桥梁的作用。
用法如下：
父组件中 通过 v-bind 绑定自定义的一个属性。
<el-card >
<regionTree v-bind:showCheckBox="false" v-bind:showLeaf="false" v-on:nodeClick='treeNodeClick'></regionTree>
</el-card>
子组件中 通过props接收数据。
export default {
props: ["showCheckBox","showLeaf"],
data() {
return {
//datas
}
这样 当父组件中属性值发生改变，对应的子组件中的值也会发生改变。
组件通信
组件间通信是开发环节重要的一环，我们既希望组件独立，数据互补干涉，又不可避免组件间会有联系和交互。可以通过直接访问，自定义事件进行跨组件函数调用。
直接访问
- $parent: 父组件实例
- $children，所有子组件
- $root 根实例
这三个挂载在this上，不提倡使用。建议使用props组件间传递数据。
自定义事件
父组件中通过 v-on 绑定一个自定义事件 nodeClick，treeNodeClick 为父组件中的一个方法。
<el-card style="min-height:400px;">
<regionTree v-bind:showCheckBox="false" v-bind:showLeaf="false" v-on:nodeClick='treeNodeClick'></regionTree>
</el-card>
子组件中
组件定义 el-tree 树形控件 有node-click事件，赋值成 nodeClick
当用户点击节点时 会触发node-click事件， this.$emit('nodeClick', nodeData);
会触发自定义事件'nodeClick'.。从而调用父组件中的 treeNodeClick方法。
<el-tree :load="loadNode" lazy
@node-click="nodeClick"
:show-checkbox = "showCheckBox" node-key="id" ref="regionTree">
</el-tree>
方法定义
methods: {
nodeClick(nodeData) {
this.$emit('nodeClick', nodeData);
},
}
这样组件间 的通讯基本完成，数据交互 可以通过props，事件交互可以通过 自定义事件完成。
