本篇文章主要介绍了Vuejs 页面的区域化与组件封装的实现。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
组件的好处
当我用vue写页面的时候，大量的数据页面渲染，引入组件简化主页面的代码量，当代码区域块代码差不多相同时，组件封装会更加简化代码。组件是Vue.js最强大的功能之一。
组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。
我用一个读书软件的图书列表例子：
图书展示页 大家可以想想用vue如何实现这个页面的前端页面实现，再来实现逻辑功能；
图片显示的 ‘推荐图书’ 和 ‘最新图书’ 的列表展示是一样的，开始可以用重复的代码把先写好的 ‘推荐图书’ 的代码复制一份就可以轻轻松松实现 ‘最新图书’ 页面
如果其他页面也需要这个展示，或我想代码更加简洁一点，那么来组件如何封装就派上场啦
简要页面：图书列表展示页 – 图书列表组件
|- book.vue // 图书展示页面 |-- BookList.vue // 图书列列表组件
基础部分相信使用过vue的伙计都知道如何使用，我直接上代码：
创建一个组件 – 注册组件 – 使用组件
// 引入组件 import BookList from '../../components/bookList/BookList.vue'; // 注册组件 components:{ BookList, }, // 使用组件
vue2.0 规定引入组件建议使用驼峰命名，使用时用 – 分开，vue才更好识别
之前没封封装组件的代码就不上传了，直接上代码：
图书列表页 – book.vue
|- book.vue - html 页面 <div> <h2>欢迎来到波波图书馆!</h2><!-- 推荐读书 --><section class="box recommend-book"> <!-- 大家注意 :books 是BookList.vue组件里图书对象数组 heading 是传给组件的标题 --></section><!-- 最新图书 --><section class="box update-book"> <!-- 大家注意 :books 是BookList.vue组件里图书对象数组 heading 是传给组件的标题 --></section></div>
我是模拟数据，开发过程中是用api接口拿数据的，其实都一样，代码有点多，原理都一样，大家看一下也可以了解一下json的知识
|- book.vue - js
|- book.vue - css *{ margin: 0; padding: 0; } li{ list-style:none; } .box{ height: auto; border-bottom: 1px solid #efefef; margin: 10px 0; padding: 5px 0; }
组件 – BookList.vue
|- 组件 - BookList.vue - html{{heading本文来源gaodai$ma#com搞$代*码*网(}}
 {{book.book_name}} 搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vuejs 页面的区域化与组件封装的实现
