前端组件抽取&父子组件交互-21

一：新建菜单

1.执行sql文件，导入后台功能菜单

2.创建文件

1）在modules模块下新建common文件夹

2）在common里新建category.vue文件

• 作为公共组件进行调用，展示三级分类列表

<template>
  <el-tree :data="menus" :props="defaultProps" node-key="catId" ref="menuTree">   </el-tree>
</template>
<script>
export default {
  data() {
    return {
      //三级菜单数据
      menus: [],
      //默认展开的数组
      expandedKey: [],
      //三级菜单展开时的属性
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  created(){
      this.getMenus();
  },
  /**
   * 方法集合
   */
  methods: {
    /**
     * 获取三级菜单数据
     */
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get"
      }).then(({ data }) => {
        console.log("成功获取到菜单数据...", data.data);
        this.menus = data.data;
      });
    }
  }
};
</script>
<style scoped></style>

3）在product包下新建attrgroup.vue属性分组

<template>
  <el-row :gutter="20">
    <!-- 前面六列作为菜单 -->
    <el-col :span="6">
        <category></category>
    </el-col>
    <!-- 前面18列作为表格 -->
    <el-col :span="18">
      表格
    </el-col>
  </el-row>
</template>

<script>
import Category from '../common/category'
export default {
  components:{
     Category 
  },
  props:{},
  data() {
    return {};
  }
};
</script>

<style scoped></style>

• 引入category.vue组件：import {Category} from "../common/category"
  注：。。/的意思就是获取当前文件所在位置的上上级目录
• 将组件注册到components里面

  components:{
     Category 
  },

• 将Category作为标签名使用

    <el-col :span="6">
        <Category></Category>
    </el-col>

4）创建列表

• 在attrgroup.vue引入相关代码
• 在product包下新建attrgroup-add-or-update.vue文件

二：子页面往父页面传参

1.子组件给父组件发送事件，携带数据

1）在子组件category.vue中的tree组件添加点击事件

 <el-tree
    :data="menus"
    :props="defaultProps"
    node-key="catId"
    ref="menuTree"
    @node-click="nodeClick"
  ></el-tree>

2）实现nodeClick方法

   /**
     * 点击tree，像父组件提交数据
     */
    nodeClick(data,node,component){
        this.$emit("tree-node-click",data,node,component);
    },

当点击以后子组件就会向父组件提供一个tree-node-click事件，携带参数

• data：数据库中封装的信息
• node：当前节点本身
• component：树形组件
• this.$emit(“tree-node-click”,data,node,component);
  1.“tree-node-click”：事件名称
  2.data,node,component：携带的参数

3）在attgroup.vue的Category组件中引入刚才声明的事件

  <!-- 前面六列作为菜单 -->
    <el-col :span="6">
      <Category @tree-node-click="treeNodeClick"></Category>
    </el-col>
 /**
     * 感知树节点
     */
    treeNodeClick(data,node,component) {
       console.log(data,node,component);
    },

• @tree-node-click：就是在子组件定义的事件名称
• data,node,component：就是子组件传递的参数，此时父组件就获取到了。