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


Posted in Javascript onSeptember 11, 2017

组件的好处

当我用vue写页面的时候,大量的数据页面渲染,引入组件简化主页面的代码量,当代码区域块代码差不多相同时,组件封装会更加简化代码。组件是Vue.js最强大的功能之一。

组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。

我用一个读书软件的图书列表例子:

图书展示页 大家可以想想用vue如何实现这个页面的前端页面实现,再来实现逻辑功能;

图片显示的 '推荐图书' 和 '最新图书' 的列表展示是一样的,开始可以用重复的代码把先写好的 '推荐图书' 的代码复制一份就可以轻轻松松实现 '最新图书' 页面

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

如果其他页面也需要这个展示,或我想代码更加简洁一点,那么来组件如何封装就派上场啦

简要页面:图书列表展示页 - 图书列表组件

|- book.vue // 图书展示页面
 |-- BookList.vue // 图书列列表组件

基础部分相信使用过vue的伙计都知道如何使用,我直接上代码:

创建一个组件 - 注册组件 - 使用组件

// 引入组件
import BookList from '../../components/bookList/BookList.vue';

// 注册组件
components:{
 BookList,
},

// 使用组件
<book-list></book-list>

vue2.0 规定引入组件建议使用驼峰命名,使用时用 - 分开,vue才更好识别

之前没封封装组件的代码就不上传了,直接上代码:

图书列表页 - book.vue

|- book.vue - html 页面
 <template> 
  <div>
  <h2>欢迎来到波波图书馆!</h2>
     
  <!-- 推荐读书 -->
  <section class="box recommend-book">
   <!-- 大家注意 :books 是BookList.vue组件里图书对象数组 heading 是传给组件的标题 -->
   <book-list :books="recommendArray" heading="推荐图书"></book-list>
  </section>

  <!-- 最新图书 -->
  <section class="box update-book">
   <!-- 大家注意 :books 是BookList.vue组件里图书对象数组 heading 是传给组件的标题 -->
   <book-list :books="updateBookArray" heading="最新图书"></book-list>
  </section>

  </div>
 </template>

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

|- book.vue - js 
<script>
 import BookList from '../../components/bookList/BookList.vue';
 export default({
  data(){
    return {

    // 推荐图书
    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,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-2',
      book_author:'liangfengbo',

     },

     {
      id:3,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-3',
      book_author:'liangfengbo',

     },
    ],

    // 最新图书
    updateBookArray:[
     {
      id:5,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-5',
      book_author:'liangfengbo',

     },

     {
      id:6,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-6',
      book_author:'liangfengbo',

     },
     {
      id:7,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-7',
      book_author:'liangfengbo',

     },
    ],
   }
  },

  // 引入组件
  components:{
   BookList,
  },

  methods : {
     
  },
 })
</script>
|- book.vue - css
<style>
 *{
  margin: 0;
  padding: 0;
 }
 li{
  list-style:none;
 }
  .box{
  height: auto;
  border-bottom: 1px solid #efefef;
  margin: 10px 0;
  padding: 5px 0;
 }
</style>

组件 - BookList.vue

|- 组件 - BookList.vue - html
<template>
 <div>
  <!-- 头部 -->
  <!--这个是页面传来的标题 -->
  <h3 class="heading">{{heading}}</h3>
  <!-- 列表 -->
  <article class="book-list">
   <!-- 遍历图书数据 -->
   <li v-for="book in books">

    <router-link :to="{ name:'BookDetail',params:{ id: book.id }}">
     ![](book.img_url) <!-- 图书图片 -->
     {{book.book_name}} <!-- 图书名字 -->
    </router-link>

   </li>   
   </article>
 </div>
</template>

|- 组件 - BookList.vue - html

<script>
 export default({
  // props 数据传递的意思
  props:[
   'heading',//标题
   'books',//图书对象数组
  ],
  data(){
   return {
  
   }
  },
  methods : {
     
  },
 })
</script>

|- 组件 - BookList.vue - css

<style scoped>
  /*图书列表*/
 .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%;
 }
</style>

全部的代码就在这里啦,大家可以细心发现,组件封装,其实就向我们之前JavaScript函数封装一样,传递参数,接收参数,渲染数据,重复利用,大家可以直接复制代码运行看一下,注释有解释啦。

小干货

父组件 调用 子组件 方法为 :

在子组件上写上名字 如:

<start-set-timeout seconds=60 ref="contTimer"></start-set-timeout>

调用方法:this.$refs.contTimer.countTime(60)

但是

因为有数据的延迟 经常会出现调用子组件的事件出现undefined的事情:

TypeError: Cannot read property 'countTime' of undefined

解决方法是

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 最常用的10个自定义函数[推荐]
Dec 26 Javascript
jQuery select操作控制方法小结
May 26 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 Javascript
实现一个简单得数据响应系统
Nov 11 Javascript
js封装成插件的步骤方法
Sep 11 #Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 #Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 #Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 #Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 #Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 #Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 #Javascript
You might like
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
php中stdClass的用法分析
2015/02/27 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
JS event使用方法详解
2008/04/28 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
python中将字典转换成其json字符串
2014/07/16 Python
Python是编译运行的验证方法
2015/01/30 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
python requests证书问题解决
2019/09/05 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
Django数据统计功能count()的使用
2020/11/30 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
求职毕业生自荐书
2014/02/08 职场文书
施工材料员岗位职责
2014/02/12 职场文书
师德师风个人反思
2014/04/28 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
关于保护环境的建议书
2019/06/24 职场文书