如何实现Vuejs页面的区域化与组件封装

这篇文章主要介绍如何实现Vuejs页面的区域化与组件封装，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

发展壮大离不开广大客户长期以来的信赖与支持，我们将始终秉承“诚信为本、服务至上”的服务理念，坚持“二合一”的优良服务模式，真诚服务每家企业，认真做好每个细节，不断完善自我，成就企业，实现共赢。行业涉及成都纯水机等，在重庆网站建设公司、营销型网站、WAP手机网站、VI设计、软件开发等项目上具有丰富的设计经验。

组件的好处

当我用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 页面
 

我是模拟数据，开发过程中是用api接口拿数据的，其实都一样，代码有点多，原理都一样，大家看一下也可以了解一下json的知识

|- book.vue - js 

|- book.vue - css

组件 - BookList.vue

|- 组件 - BookList.vue - html

|- 组件 - BookList.vue - html

|- 组件 - BookList.vue - css

  /*图书列表*/
 .book-list {
  width:100%;
  height:128px;
  display: flex;
  justify-content: space-around;
 }
 .heading {
  border-left: 4px solid #333;
  margin: 10px 0;
  padding-left: 4px;
 }
 .book-list li {
  width:80px;
  height: 100%;
  flex:1;
  margin:0 10px;

 }

 .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

解决方法是

// 调用时加一个定时器
setTimeout(() => {
 this.$refs.contTimer.countTime(60)
}, 20)

以上是“如何实现Vuejs页面的区域化与组件封装”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！