Vue子组件给父组件传递数据

准备工作

我们需要2个vue页面，一个是我们页面，一个是我们页面中要引入的组件页面，我们页面是通过layout进行布局，左边为我们通过组件引入的页面占6格，右边为我们表格占18格

要实现的功能

1.现在有一个vue页面，使用了layout布局。左边为我们的商品的显示，右边为我们的表格。

2.我们需要点击我们左边的商品展示的内容，右侧表格对应内容显示。

得到子组件的内容

我们现在有一个子组件category.vue，我们的attgroup.vue，当我们的category.vue点击的时候我们的attgroup.vue需要感受到。

1）子组件（category）给父组件（attrgroup）传递数据，事件机制；

去element-ui的tree部分找event事件，看node-click()

在category中绑定node-click事件，

this.$emit() 子组件给父组件发送一个事件，携带上数据；

我们可以打印一下看一下这些数据是否为我们需要得到的数据

我们点击了手机，手机的数据全部都在data里面展示了，还有手机children都展示了

父组件怎么得到子组件传递的方法
在我们引用的标签加上这些东西：表明他的子组件可能会传递过来点击事件，用自定义的函数接收传递过来的参数

然后我们编写我们的这个事件方法

       //感知树节点被点击
      treeNodeClick(data,node,component){
        console.log("attrgroup感知到category子组件节点被点击",data,node,component);
        console.log("刚才被点击的菜单id",data.catId,"name为",data.name);
      },

我们打印了里面的数据，我们可以看一下，完全没有问题

在我们表格得到数据

1.我们要得到的是什么数据
我们要得到的这个我们的商品id（Cat_id）下的所有的商品属性，注意我们的商品属性编写层级为3才有

2.怎么得到数据
2.1.我们后端编写请求方法查询出我们的数据，并且分页展示给我们的前端

service接口

 PageUtils queryPage(Map<String, Object> params, Long catelogId);

service实现类

   @Override
    public PageUtils queryPage(Map<String, Object> params, Long catelogId) {
        if (catelogId == 0) {
            //如果传入id没有就查出所有
            IPage<AttrGroupEntity> page = this.page(new Query<AttrGroupEntity>().getPage(params), new QueryWrapper<AttrGroupEntity>());
            return new PageUtils(page);
        } else {
            String key = (String) params.get("key");
            // select * from pms_attr_group where catelog_id=? and (attr_group_id=key or attr_group_name like %key%)
            QueryWrapper<AttrGroupEntity> wrapper = new QueryWrapper<>();
            wrapper.eq("catelog_id", catelogId);
            if (!StringUtils.isEmpty(key)) {
                wrapper.and((obj) -> {
                    obj.eq("attr_group_id", key).or().like("attr_group_name", key);

                });
            }
            IPage<AttrGroupEntity> page = this.page(new Query<AttrGroupEntity>().getPage(params), wrapper);
            return new PageUtils(page);
        }
    }

我们前端发送请求，查询我们的数据库
data初始化的值

data() {
    return {
      catId: 0,
      dataForm: {
        key: "",
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
    };
  },

method方法：

getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl(`/product/attrgroup/list/${this.catId}`),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },

我们需要动态的刷新我们的页面我们就可以在我们的获取子组件的方法中进行操作，当我们子组件查询出来的catid一变化我们就执行getDataList()中的方法