🦖我是Sam9029，一个前端

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主

**🐱‍🐉🐱‍🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍**

简易Vue2-简易图书借阅管理

前言

熟悉vue2 的语法以及深入使用与了解组件开发

本着是做一个练习的小项目，采用的是外部导入Vue2，加手动注册组件的写法

外部导入Vue链接

项目运行是直接在 JS 中引入 Vue的CDN链接来使用

依赖链接： https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js

手动注册组件语法

其实与vue-cli项目中使用一样的
但是需要现在JS代码中如此注册

Vue.component('组件名',{
    template:``,
    data(){
        return {}
    },
    methods:{},
    computed:{},
})

即使用了 Vue.component() 这个命令来注册组件（全局环境下，即window）

如要使用直接在

<组件/>
` 中直接使用即可

但是若注册了多个组件，要使用子组件则要使用非自闭合的标签 <组件><自组件/></组件>

需求

一个页面结构组件
- 包含以下的三个组件
一个所有图书列表组件
- 展示所有图书数据（所有书籍都固定为一本）
- 拥有一个借阅按钮
  - 借阅后显示被借阅了
一个我的图书列表组件
- 渲染目前借阅的书籍
- 拥有一个归还按钮
  - 归还后消除该书籍数据
一个借阅历史组件（进一步练习）
- 记录所有的借阅操作，以及书籍的借阅状态

其实就相当于一个 个人的书库

效果源码

源码地址：
vue组件-Sample Book Cent Manga (codepen.io)

效果展示：

思路分析

注册四个组件

分别是

页面结构组件

书籍列表组件

我的借阅组件

借阅记录组件

请添加图片描述

四个组件的关系：

页面结构组件(父组件)

书籍列表组件(子)

我的借阅组件(子)

借阅记录组件(子)

页面结构组件的使用

设定所有书籍的数据源

根据需求来，我们可以先设定一个所有书籍数据的数据源，来保存所有的书籍信息数据、同时要保证所有的组件都能获取到其数据，所以就需要在唯一的父组件身上定义数据源

最合理的还是采用数组包对象的数据格式

[{},{}]

进一步拓展

[{bookId:'',bookName:'',price:'',press:'',borrowStatus:''},{……}]

当然啦，你也可以在对象中写入其他的你想要展示的信息

设定在组件的data属性中：

请添加图片描述

使用动态组件来实现页面的切换

因为有三个子组件，所有可以用动态组件来设置切换,

同时在 data中设定一个 currentCpn的变量，来给动态组件的 is 属性绑定使用
同时从源数据中筛选借阅状态为 true的数据传值给动态组件（相当于传给子组件）
同时把源数据传值给动态组件
以及需要使用的方法

<!-- 动态绑定不能直接写，子组件名字，要在父组件的data中现定义一个变量，在赋值为子组件名 -->
    <component 
    :is='currentCpn' 
    :bookData='bookData' 
    :myBorrowBookData='myBorrowBookData'
    @borrowFoo='borrowFoo'
    @returnFoo='returnFoo'
    @deleteFoo='deleteFoo'>
    </component>

所有组件的使用

接受值：

props:{
    bookData:{
        type:Array,
        default:()=>[]
    }
},

根据组件具体需求，编写功能

待改进

给每本书设置数量
为书籍借阅设置 借阅期限
在我的借阅中添加借阅时间，到期提醒
在历史借阅中设置具体的借阅时间记录
样式优化

🦖我是Sam9029，一个前端

文章若有错误，敬请指正🙏

**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧**

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主

本文含有隐藏内容，请开通VIP 后查看

【Vue2】Vue2-简易图书借阅管理