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

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

微服务和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. 新建组件：StuDetailComponent.vue

<template>
    <div>
      <el-card shadow="always" >
        <el-row style="margin-left: 10%">
          <el-col :span = "4">
            <label><strong>学号</strong></label><br>
           ...
           ...
          </el-col>
            <el-col :span = "9">
            <label>{{stuInfo.stuNo}}</label><br>
            ...
            ...
          </el-col>
          ...
          ...
        </el-row>
      </el-card>
    </div>
</template>

<script>
    export default {
        name: "StuDetailComponent",
      props:{
          stuInfo:{}
      }
    }
</script>

<style scoped>
  label{
    line-height: 30px;
}
</style>

其中，

 props:{
      stuInfo:{}
  }

代表，从父组件中传入 stuInfo 这个信息。

2. 父组件修改

2.1 引入：

import vStuDetailComponent from '@/components/stu_manage/children/StuInfoMgmt/StuDetailComponent'
  components: {
    vStuDetailComponent
  },

2.2 使用：

<!--详情 detailDialogVisible-->
<el-dialog title="学生信息详情" :visible.sync="detailDialogVisible" style="min-width: 800px" center>
  <v-stu-detail-component :stuInfo = "stuInfo"></v-stu-detail-component>
</el-dialog>

使用

:stuInfo = "stuInfo"

将JSON对象stuInfo复制给子组件的stuInfo，完成父组件向子组件的传值。