Vue抽取组件以及父子组件通信

抽取组件
当vue的组件要持续复用的时候，最好的办法是抽取组件放到一个专门的公共组件文件夹中，这里我们抽取一下三级分类的树形结构组件：

最好建一个公共文件夹，将抽取的组件存到里边，我们将
product里的category里的树形结构组件抽出来放到common里的category中

<template>
  <div>
    <el-tree
      :data="TreeMenus"
      :props="defaultProps"
      node-key="catId"
      ref="menuTree"
      @node-click="nodeclick"
    >

    </el-tree>
  </div>
</template>

<script>
export default {
  // 抽取树形结构的组件
  components: {},
  props: {},
  data () {
    return {
      TreeMenus: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dialogVisible: false
    }
  },
  created () {
    this.getTreeMenus()
  },
  methods: {
    getTreeMenus () {
      this.dataListLoading = true
      this.$http({
        'url': this.$http.adornUrl('/product/category/list/tree'),
        'method': 'get'
      }).then(res => {
        this.TreeMenus = res.data.data
        console.log('treeMenus:', res.data.data)
      })
    },
   
  }
}
</script>
<style  scoped>

</style>

这是抽取出来的树形结构组件。
我们将在attrgroup中使用所抽取的组件：

首先通过import导入抽取过来的组件：

import 《组件名称》 from ‘《组件路径》’;

import Category from '../common/category'

然后再将引入的组件通过components注入到对象中

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {Category}
  }

通过标签的方式来使用组件就OK了

组件通信：

如果父组件想使用子组件的数据，换句话说就是当子组件的数据发生变化后父组件该怎样 感应子组件的数据变化？
这里拿抽取出来的树形结构来举例：
el-tree 当子节点被点击后，可以拿到被点击子节点的数据，根据官方所提供的：nodeclick 方法

需要的三个参数：data, node, component
我们打印一下：

被点击的节点的数据信息以及节点信息清楚地展现出来

现在的问题是这是个被抽取出来的组件是被父组件所使用的，那么父组件使用这个组件的时候该怎么拿到这些数据呢？

使用$emit向父组件发送事件信息

this.$emit(param1:"事件名称",param2:"携带的数据")

父组件这样接收子组件发送来的事件信息：

@tree-node-click是子组件发送过来的事件名称，treeNodeClick使我们父组件自定义的方法名称，
在Methods里使用就行了：

本人小白记录日常，还请大佬勿喷！