1. 前言

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

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

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


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


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

2. 后端代码的编写

2.1 xml
<insert id="stuAdd" parameterType="java.util.Map" useGeneratedKeys="true" keyProperty="stu_no">
    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});
</insert>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
2.2 dao
int stuAdd(Map<String,Object> student);
  • 1.
2.3 service 接口
int addStu(Map<String,Object> student);
  • 1.
2.4 service 实现类
@Override
public int addStu(Map<String, Object> student) {
    return stuDAO.stuAdd(student);
}
  • 1.
  • 2.
  • 3.
  • 4.
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;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

3. 前端修改

3.1 apis.js
export const studentAdd = params=>request('post','/student/add',params);
  • 1.
3.2 对话框的源代码
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="活动名称" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="活动区域" :label-width="formLabelWidth">
      <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

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

<el-dialog title="学生添加" :visible.sync="dialogFormVisible" style="min-width: 800px" center>
  <v-stu-add-component v-on:isAdd = "isAddMethod"></v-stu-add-component>
</el-dialog>
  • 1.
  • 2.
  • 3.

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

3.3 新建组件stuAddComponent.vue
<template>
    <div style="margin-left:50px">
      <el-form  :inline="true" :model="stuInfoForm" class="demo-form-inline"  :rules="stuInfoRules" ref="stuInfoForm">
        <el-form-item label="学号" prop="stuNo">
          <el-input v-model="stuInfoForm.stuNo"></el-input>
        </el-form-item>
	...
	...
      </el-form>
      <div slot="footer" style="margin-left: 25%; margin-top:5%">
        <el-button @click="resetForm('stuInfoForm')">重 置</el-button>
        <el-button type="primary" @click="submitForm('stuInfoForm')">确 定</el-button>
      </div>
    </div>
</template>

<script>
  import {studentAdd} from "@/api/apis"

  export default {
        name: "stuAddComponent",
      data(){
          return{
            stuInfoForm: {
           ...
           ...
            },
            stuInfoRules: {
              stuNo: [
                {required: true, message: '请输入学生学号', trigger: 'blur'}
              ],
              ...
              ...
            }
          }
      },
      methods:{
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              studentAdd({
                stuNo: this.stuInfoForm.stuNo,
                ......
              })
                .then(successResponse =>{
                  //获取后端返回数据
                  let state = successResponse.data.state;
                  //判断是否插入成功
                  if(state === 200){
                    this.$message('添加成功');
                    this.resetForm(formName);
                    // 向父组件传信息
                    this.$emit("isAdd","1");
                  }else {
                    this.$message('添加失败');
                  }
                })
            } 
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }
    }
</script>
<style scoped>
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
3.4 父组件 StuInfoMgmt.vue
3.4.1 引入组件
import vStuAddComponent  from '@/components/stu_manage/children/StuInfoMgmt/stuAddComponent'
  • 1.
components: {
  vStuAddComponent
},
  • 1.
  • 2.
  • 3.
3.4.2 使用组件
<el-dialog title="学生添加" :visible.sync="dialogFormVisible" style="min-width: 800px" center>
  <v-stu-add-component v-on:isAdd = "isAddMethod"></v-stu-add-component>
</el-dialog>
  • 1.
  • 2.
  • 3.

4. 子组件父组件通信

4.1 子组件
this.$emit("isAdd","1");
  • 1.
4.2 父组件
<v-stu-add-component v-on:isAdd = "isAddMethod"></v-stu-add-component>
  • 1.

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

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