组件的好处
当我用vue写页面的时候,大量的数据页面渲染,引入组件简化主页面的代码量,当代码区域块代码差不多相同时,组件封装会更加简化代码。组件是Vue.js最强大的功能之一。
组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。
我用一个读书软件的图书列表例子:
图书展示页 大家可以想想用vue如何实现这个页面的前端页面实现,再来实现逻辑功能;
图片显示的 '推荐图书' 和 '最新图书' 的列表展示是一样的,开始可以用重复的代码把先写好的 '推荐图书' 的代码复制一份就可以轻轻松松实现 '最新图书' 页面
如果其他页面也需要这个展示,或我想代码更加简洁一点,那么来组件如何封装就派上场啦
简要页面:图书列表展示页 - 图书列表组件
基础部分相信使用过vue的伙计都知道如何使用,我直接上代码:
创建一个组件 - 注册组件 - 使用组件
vue2.0 规定引入组件建议使用驼峰命名,使用时用 - 分开,vue才更好识别
图书列表页 - book.vue
我是模拟数据,开发过程中是用api接口拿数据的,其实都一样,代码有点多,原理都一样,大家看一下也可以了解一下json的知识
// 推荐图书
recommendArray:[
{
id:1,img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',book_name:'Vuejs-1',book_author:'liangfengbo',{
id:2,book_name:'Vuejs-2',{
id:3,book_name:'Vuejs-3',],// 最新图书
updateBookArray:[
{
id:5,book_name:'Vuejs-5',{
id:6,book_name:'Vuejs-6',{
id:7,book_name:'Vuejs-7',}
},// 引入组件
components:{
BookList,methods : {
},})
组件 - BookList.vue
<router-link :to="{ name:'BookDetail',params:{ id: book.id }}">
<a class="attachment" href="/public/api.php?app=files&do=download&file=book.img_url&t=1735009299" target="_blank" title="点击下载[book.img_url]">book.img_url</a> <!-- 图书图片 -->
{{book.book_name}} <!-- 图书名字 -->
</router-link>
@H_301_80@
<router-link :to="{ name:'BookDetail',params:{ id: book.id }}">
<a class="attachment" href="/public/api.php?app=files&do=download&file=book.img_url&t=1735009299" target="_blank" title="点击下载[book.img_url]">book.img_url</a> <!-- 图书图片 -->
{{book.book_name}} <!-- 图书名字 -->
</router-link>
@H_301_80@
|- 组件 - BookList.vue - html
}
},})
|- 组件 - BookList.vue - css
}
.book-list li img{
height: 100px;
width: 100%;
}
.book-list li a{
text-align: center;
font-size: 12px;
text-decoration: none;
display: inline-block;
width: 100%;
}
全部的代码就在这里啦,大家可以细心发现,组件封装,其实就向我们之前JavaScript函数封装一样,传递参数,接收参数,渲染数据,重复利用,大家可以直接运行看一下,注释有解释啦。
小干货
在子组件上写上名字 如:
调用方法:this.$refs.contTimer.countTime(60)
但是
因为有数据的延迟 经常会出现调用子组件的事件出现undefined的事情:
TypeError:
Cannot read property 'countTime' of undefined
解决方法是