vue 父子组件实现图书管理
时间:2020-11-21
本文章向大家介绍vue 父子组件实现图书管理,主要包括vue 父子组件实现图书管理使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
详情:https://gitee.com/eduworkflow/opwf-front
子组件
<template> <div> <el-dialog title="新增图书" :visible="visible" > <div><span>图书名称:</span> <el-input class='elinput' v-model="data.btitle" ></el-input> </div> <div><span>发布日期:</span> <el-input class='elinput' v-model="data.bpub_date" > </el-input> </div> <div><span>阅读量:</span> <el-input class='elinput' v-model="data.bread" ></el-input> </div> <div><span>评论量:</span> <el-input class='elinput' v-model="data.bcomment" ></el-input> </div> <el-button @click="cancel">取 消</el-button> <el-button type="primary" @click="addBook" >确 定</el-button> </el-dialog> </div> </template> <script> // import { addbook } from '@/http/apis' export default { props: ['data', 'visible'], data() { return { } }, methods: { addBook() { this.$emit('update:visible', false) // 隐藏弹出框 this.$emit('save') }, cancel() { this.$emit('update:visible', false) } }, mounted() { } } </script> <style> .elinput { width: 220px; height: 40px; } </style>
父组件
<template> <div> <h1>图书管理系统 {{ dialogVisible }}</h1> <div style="margin: 30px;"> <button @click="addNew">新增图书</button> <BookEdit v-show='dialogVisible' :visible.sync='dialogVisible' :data='editData' @save='save' ></BookEdit> </div> <div> <table style='margin: auto; border: solid 1px black;'> <tr> <th>图书编号</th> <th>图书名字</th> <th>出版时间</th> <th>阅读数</th> <th>评论数</th> <th>操作</th> </tr> <tr v-for="(book, index) in books" :key="book.id" > <td>{{book.id}}</td> <td>{{book.btitle}}</td> <td>{{book.bpub_date}}</td> <td>{{book.bread}}</td> <td>{{book.bcomment}}</td> <td> <button @click="edit(book)">修改</button> <button @click="del(book.id)">删除</button> </td> </tr> </table> </div> </div> </template> <script> import { getBookList, addBook, updateBook, delBook } from '@/http/apis' import BookEdit from './components/BookEdit' export default { components: { BookEdit, }, data() { return { dialogVisible: false, books: [ { id: 3, btitle: "...", bpub_date: "2020-08-11", bread: 100, bcomment: 50 } ], editData: { // 编辑的内容 btitle: "", bpub_date: "", bread: 0, bcomment: 0 } } }, methods: { // 1.点击新增图书时初始化数据 addNew() { this.editData = { // 初始化 编辑内容 btitle: "", bpub_date: "", bread: 100, bcomment: 0 } this.dialogVisible = true // 显示弹框 }, // 2.获取图书列表 get() { getBookList().then((data) => { // console.log(data) // books: [{btitle: "西游记", bpub_date: "2020-08-11", bread: 100, bcomment: 50}] this.books = data.books }) }, // 3.修改或者添加图书 save() { // 根据editData中的id判断是更新还是新增 // debugger console.log(this.editData) if (this.editData.id) { // 如果有id, 修改图书 // 修改请求 let params = this.editData updateBook(params).then((res)=>{ console.log(res) this.get() }) } else { // 增加图书 addBook(this.editData).then((res) => { this.get() }) } }, // 点击修改弹出修改页面 edit(book) { this.editData = book this.dialogVisible = true }, // 删除 del(book_id) { let params = { id: book_id } delBook(params).then((res)=>{ console.log(res) this.get() }) } }, created() { this.get() } } </script> <style> table tr td { width: 150px; border: solid 1px black; } </style>
原文地址:https://www.cnblogs.com/shanjiaaa/p/14017549.html
- netty-socketio 示例代码
- 树莓派:你是我的眼
- redis 学习笔记(7)-cluster 客户端(jedis)代码示例
- Python应用03 使用PyQT制作视频播放器
- struts2(三)之表单参数自动封装与参数类型自动转换
- mysql benchmark基准测试
- redis 学习笔记(6)-cluster集群搭建
- redis 学习笔记(6)-cluster集群搭建
- dubbox REST服务使用fastjson替换jackson
- JavaScript中removeEventListener()使用注意事项
- dubbox REST服务使用fastjson替换jackson
- struts2(二)之配置文件详解与结果视图
- CSS魔法堂:你真的懂text-align吗?
- 黑客可以利用传感器数据来破解手机密码
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 花十分钟的时间武装你的代码库
- 对HTML-input的一些思考和理解
- 【投稿】刀哥:Rust学习笔记 1
- 【Rust日报】2020-08-13 关于群集(Bevy)引擎ECS框架中system的语法糖是怎么实现的
- 最新情报:所有的递归都可以改写成非递归?
- 算法篇:树之转换为二叉搜索树
- 算法篇:树之倒数k个节点
- 揭开链表的真面目
- Coder,我怀疑你并不会枚举
- 掌握坐标轴的log转换
- 连通域的原理与Python实现
- 涨见识!Java String转int还有这种写法
- RTSP拉流协议视频平台EasyNVR能够接入多少路视频直播流?
- 安装allure后执行命令后报错 INTERNALERROR> AttributeError: module 'pytest' has no attribute 'allure'
- 太好玩了,爬虫、部署API、加小程序,一条龙玩转知乎热榜