微服务和VUE入门教程(19)： VUE组件化--子组件向父组件通信

微服务和VUE入门教程(19)： VUE组件化 – 子组件向父组件通信

微服务和VUE入门教程(0): 着手搭建项目
微服务和VUE入门教程(1): 搭建前端登录界面
微服务和VUE入门教程(2): 注册中心
微服务和VUE入门教程(3): user微服务的搭建
微服务和VUE入门教程(4)：网关zuul的搭建
微服务和VUE入门教程(5)： 前后端交互
微服务和VUE入门教程(6)：连接数据库-mybatis
微服务和VUE入门教程(7):配置中心-config
微服务和VUE入门教程(8):前端主页的编写
微服务和VUE入门教程(9)： token验证-token后端生成以及前端获取
微服务和VUE入门教程(10)： token验证-前端登录拦截以及token过期提醒
微服务和VUE入门教程(11): mybatis 动态查询
微服务和VUE入门教程(12)：前端提示搜索框的实现
微服务和VUE入门教程(13)： token验证-zuul拦截与验证
微服务和VUE入门教程(14)： 热部署
微服务和VUE入门教程(15)： 课堂小知识
微服务和VUE入门教程(16)： zuul 熔断
微服务和VUE入门教程(17)： VUE 响应拦截器
微服务和VUE入门教程(18)： 前端接口模块化
微服务和VUE入门教程(19)： VUE组件化–子组件向父组件通信
微服务和VUE入门教程(20)： VUE组件化–父组件向子组件通信
微服务和VUE入门教程(21)： springboot中定时器-Schedule
微服务和VUE入门教程(22): 页面长时间未操作自动退出登录
微服务和VUE入门教程(23): 微服务之间的调用
微服务和VUE入门教程(24): 微服务之断路器
微服务和VUE入门教程(25): 微服务之Hystrix-dashboard
微服务和VUE入门教程(26): 微服务之turbine
微服务和VUE入门教程(27)：VUE前端工程打包

1. 前言

一个页面中是由不同的组件组成，比如弹出框，表格等。如果所有的代码放在一个文件中，那么这个文件含无疑问，会很有几百行的代码。对于编写，阅读，和维护，都不友好。因此，我们可以把一些代码封装成组件，直接在页面中引用。组件的使用，我们的头部导航栏和侧边栏就是一个组件。

在这里，我们封装一个对话框的组件，并举例子组件向父组件通信。

我们要将这个对话框的代码封装成一个组件

2. 后端代码的编写

2.1 xml

    INSERT INTO `blog`.`student`
    (`stu_no`, `stu_name`, `stu_sex`, `stu_address`, `stu_tel`, `class_id`, `stu_age`)
    VALUES (#{stuNo},#{stuName},#{stuSex},#{stuAddress},#{stuTel},#{classId},#{stuAge});

2.2 dao

int stuAdd(Map student);

2.3 service 接口

int addStu(Map student);

2.4 service 实现类

@Override
public int addStu(Map student) {
    return stuDAO.stuAdd(student);
}

2.5 controller

/**
 * 增加学生
 * */
@RequestMapping(value = "/add", method = RequestMethod.POST)
public JSONObject addStudent(@RequestBody JSONObject student){
    System.out.println("add");
    int isAdd = stuService.addStu(student);
    JSONObject result = new JSONObject();
    if(isAdd == 1){
        result.put("state",200);
    }else {
        result.put("state",400);
    }
    return result;
}

3. 前端修改

3.1 apis.js

export const studentAdd = params=>request('post','/student/add',params);

3.2 对话框的源代码

  
    
      
    
    
      
        
        
      
    
  
  

    取 消
    确 定
  

这是elementUI中包含对话框的源代码,我们在这里封装成一个组件。

其中：v-stu-add-component 就是我们封装的组件。

3.3 新建组件stuAddComponent.vue

3.4 父组件 StuInfoMgmt.vue

3.4.1 引入组件

import vStuAddComponent  from '@/components/stu_manage/children/StuInfoMgmt/stuAddComponent'

components: {
  vStuAddComponent
},

3.4.2 使用组件

4. 子组件父组件通信

4.1 子组件

this.$emit("isAdd","1");

4.2 父组件

监控子组件的isAdd，触发isAddMethod方法，val为子组件传过来的值 1.

//判断学生是否添加成功
isAddMethod(val){
  if(val === '1'){
    this.dialogFormVisible = false;
  }
},