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 相关文章推荐
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
理解Javascript闭包
Nov 01 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
JavaScript中的回调函数实例讲解
Jan 27 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/09/12 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
JavaScript 原型与继承说明
2010/06/09 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
Express的路由详解
2015/12/10 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
python实现八大排序算法(2)
2017/09/14 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
Sanic框架Cookies操作示例
2018/07/17 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
运动会入场式解说词
2014/02/18 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
学术会议开幕词
2016/03/03 职场文书
倡议书怎么写?
2019/04/11 职场文书
python区块链实现简版工作量证明
2022/05/25 Python