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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 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使用ODBC连接数据库的方法
2015/07/18 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
js 蒙版进度条(结合图片)
2010/03/10 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
python实现决策树分类
2018/08/30 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
Python数组并集交集补集代码实例
2020/02/18 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
Hotels.com中国区:好订网
2016/08/18 全球购物
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL