我的 Vue.js 学习日记 (十一) - 父子组件间的互相传值

in 编程
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

上节回顾

上节我用element-uivue-router 实现了页面跳转的功能。

回想一下,vue-router实现组件之间的切换关键也就俩东西,一个router-link一个router-view,所以说总体来说上一节也没学啥。

本节目标

props父组件向子组件传值

$emit子组件向父组件传值

基于上一节的例子,脑子里构思了一个点击tablerow,弹出框显示本行信息这样一个画面

1.创建表单弹出框

要点:

student-list-info组件完整代码:

<template>
  <div>
    <el-button icon="el-icon-more" @click="dialogFormVisible = true" circle></el-button>
    <el-dialog title="查询" :visible.sync="dialogFormVisible">
      <el-form :model="student">
        <el-form-item label="姓名">
          <el-input v-model="student.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="student.sex"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model.number="student.age" type="number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doConfirm(student)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'student-list-info',
  props: ['student'],
  data () {
    return {
      dialogFormVisible: false
    }
  },
  methods: {
    doConfirm (student) {
      this.$emit('confirm', student)
      this.dialogFormVisible = false
    }
  }
}
</script>

<style scoped>

</style>

2.将弹出框引入List页面

student-list页面需要注意的只有这里:
<student-list-info style="float: left" @confirm="onConfirm" :student="this.student"></student-list-info>

:student:中的student对应props: ['student']中的student

@confirm:@后面的confirm对应this.$emit('confirm', this.form)中的confirm

完整代码:

<template>
  <div>
    <el-row>
    <student-list-info style="float: left" @confirm="onConfirm" :student="this.student"></student-list-info>
    </el-row>
    <hr>
    <h3>学员列表</h3>
  <el-table
    :data="tableData"
    @row-click="onRowClick"
    border
    stripe
    style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性别"
      width="180">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
import studentListInfo from './student-list-info'

export default {
  name: 'student-list',
  components: {
    studentListInfo
  },
  data () {
    return {
      tableData: [{
        name: '张楚岚',
        sex: '男',
        age: '23'
      },
      {
        name: '冯宝宝',
        sex: '女',
        age: '99'
      },
      {
        name: '赵方旭',
        sex: '男',
        age: '59'
      },
      {
        name: '肖自在',
        sex: '男',
        age: '36'
      }
      ],
      student: {
        name: '',
        sex: '',
        age: 0
      }
    }
  },

  methods: {
    onConfirm (item) {
      this.tableData.push(item)
    },
    onRowClick (row) {
      this.student = {
        name: row.name,
        sex: row.sex,
        age: row.age
      }
    }
  }
}
</script>

<style scoped>

</style>

3.查看效果

1.添加学员信息

图片描述

图片描述

2.查看学员信息

查看功能一直没有思路,只能先记录一下现在的想法,拿已有的知识来实现他啦

先选中要查看的行,然后点击按钮展示选中的学员信息。
图片描述

小节

现在的能力真的很有限,再加上知识面太窄,目前没有找到好的方式可以直接点击行弹出表单信息而不报错的方式,不过我相信用不了多久就可以实现啦,1点了,累,睡啦...

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看