第十九章：品牌tree公共组件抽取

1、创建公共包以及品牌tree公共组件页面

在src\views\modules下创建放公共组件的文件夹：common
品牌公共组件：category.vue

src\views\modules\common\category.vue

2、页面内容

要点：
由于这个组件需要在其他（相当于父组件）页面被调用引入，需要子组件节点的数据
1：在<el-tree>组件上绑定一个节点被点击时的回调函数 @node-click="nodeclick"（elementUI）
2：在methods中定义nodeclick这个方法，其中有三个参数：
      data：节点绑定的数据；
      node：节点数据；
      component：组件本身；
3：用this.$emit("事件类型","数据1","数据2","数据n")向父组件传递数据
      事件类型：父组件需要定义的事件类型；
      数据：传递的多个数据；

<template>
<!-- 
    :data：绑定的数据
    :props="defaultProps"：要渲染的数据项
    :expand-on-click-node="false"：只要点击箭头才会被展开
    node-key="catId"：唯一性标识
    @node-click="nodeclick"：节点被点击回调方法
 -->
  <el-tree
    :data="menus"
    :props="defaultProps"
    :expand-on-click-node="false"
    node-key="catId"
    @node-click="nodeclick"
  >
  </el-tree>
</template>

<script>
export default {
  data() {
    //这里存放数据
    return {
      menus: [],
      defaultProps: {
        // children为显示的子节点，必须返回的menus数组的属性key
        children: "children",
        // 要显示出来的名称，必须是返回menus数组的属性key
        label: "name",
      },
    };
  },
  //方法集合
  methods: {
    //获取tree数据列表
    getMenus() {
      this.$http({
        //请求的url
        url: this.$http.adornUrl("/product/category/list/tree"),
        //请求方式
        method: "get",
        //成功以后的对数据的处理，把数据打印测试 ({data}):解构表达式
      }).then(({ data }) => {
        console.log("成功获取数据：" + data.data);
        // 把获取到的数据赋值给menus
        this.menus = data.data;
      });
    },

    //单节点被点击回调方法，data：节点绑定的数据，node：节点数据，component：组件本身
    nodeclick(data, node, component) {
      console.log("子节点被点击：", data, node, component);
      // 向父节点传递数据，第一个参数为父组件的事件名称，其他为任意多的参数
      this.$emit("children-onde-click", data, node);
    },
  },
  //查询节点数据
  created() {
    this.getMenus();
  },
};
</script>
<style>
</style>