🦖我是 Sam9029，一个前端

Sam9029 的 InfoQ 主页:Sam9029 (infoq.cn)

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

简易 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）

如要使用 直接 在

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

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

需求

• 一个页面结构组件

• 包含以下的三个组件

• 一个所有图书列表组件

• 展示所有图书数据（所有书籍都固定为一本）

• 拥有一个借阅按钮

• 借阅后显示被借阅了

• 一个我的图书列表组件

• 渲染目前借阅的书籍

• 拥有一个归还按钮

• 归还后消除该书籍数据

• 一个借阅历史组件 （进一步练习）

• 记录所有的借阅操作，以及书籍的借阅状态

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

效果源码

源码地址：vue2-手写组件-Sample Book Cent Manga - 码上掘金 (juejin.cn)

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 的 InfoQ 主页:[Sam9029 (infoq.cn)](