组件的好处
当我用vue写页面的时候，大量的数据页面渲染，引入组件简化主页面的代码量，当代码区域块代码差不多相同时，组件封装会更加简化代码。组件是Vue.js最强大的功能之一。
组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。
我用一个读书软件的图书列表例子：
图书展示页 大家可以想想用vue如何实现这个页面的前端页面实现，再来实现逻辑功能；
图片显示的 '推荐图书' 和 '最新图书' 的列表展示是一样的，开始可以用重复的代码把先写好的 '推荐图书' 的代码复制一份就可以轻轻松松实现 '最新图书' 页面
如果其他页面也需要这个展示，或我想代码更加简洁一点，那么来组件如何封装就派上场啦
简要页面：图书列表展示页 - 图书列表组件
|- 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.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)以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。
新闻热点
疑难解答
