vue组件使用

组件

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
      }

这样 当父组件中属性值发生改变，对应的子组件中的值也会发生改变。

组件通信

组件间通信是开发环节重要的一环，我们既希望组件独立，数据互补干涉，又不可避免组件间会有联系和交互。可以通过直接访问，自定义事件进行跨组件函数调用。

直接访问

1. $parent: 父组件实例
2. $children，所有子组件
3. $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，事件交互可以通过 自定义事件完成。