🦖我是Sam9029,一个前端
Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主
**🐱🐉🐱🐉恭喜你,若此文你认为写的不错,不要吝啬你的赞扬,求收藏,求评论,求一个大大的赞!👍**
熟悉vue2 的语法 以及深入使用与了解 组件开发
本着是做一个练习的小项目,采用的是外部导入Vue2,加手动注册组件的写法
项目运行是直接在 JS 中引入 Vue的CDN链接来使用
依赖链接 : https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.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
的数据 传值给 动态组件(相当于传给子组件)
<component
:is='currentCpn'
:bookData='bookData'
:myBorrowBookData='myBorrowBookData'
@borrowFoo='borrowFoo'
@returnFoo='returnFoo'
@deleteFoo='deleteFoo'>
component>
接受值:
props:{ bookData:{ type:Array, default:()=>[] } },
借阅期限
我的借阅
中添加借阅时间,到期提醒历史借阅
中设置具体的借阅时间记录
文章若有错误,敬请指正🙏
**🐱🐉🐱🐉恭喜你,都看到这了,求收藏,求评论,求一个大大的赞👍!不过分吧**
Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主