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 相关文章推荐
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
JavaScript中URL编码函数代码
Jan 11 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
AngularJS 表达式详解及实例代码
Sep 14 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
小程序实现分类页
Jul 12 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
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
PHP生成plist数据的方法
2015/06/16 PHP
PHP类的特性实例分析
2016/09/28 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
优化javascript的执行速度
2010/01/23 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
解决Mac node版本升级失败的问题
2018/05/16 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
Python3字符串学习教程
2015/08/20 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
python如何读取bin文件并下发串口
2019/07/05 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
四年大学生活的个人自我评价
2013/12/11 职场文书
中华魂演讲稿
2014/05/13 职场文书