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

组件的优势

当我用vue写一个页面时，会呈现大量的数据页面，并引入组件来简化主页面的代码量。当代码块代码几乎相同时，组件封装将进一步简化代码。组件是Vue.js最强大的功能之一

组件可以扩展HTML元素并封装可重用的代码。在更高的层次上，组件是一个自定义元素，Vue.js的编译器为其添加了特殊的功能。在某些情况下，组件也可以是本机HTML元素的形式，这些元素通过is特性进行扩展。

我用了一个书单阅读软件的例子：

在图书展示页面，可以思考如何用vue实现这个页面的首页，然后实现逻辑功能；

图中显示的“推荐书籍”和“最新书籍”列表相同。复制先写的“推荐书籍”代码，重复代码，就可以轻松实现“最新书籍”页面

如果其他页面也需要这种显示，或者我希望代码更简洁，那么如何打包组件将被发送到字段

简要页面：书单显示页面-书单组件

|-book . vue//book display page |-book list . vue//book column list组件的基础部分相信所有用过vue的家伙都知道怎么用。我直接编码：

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

//从导入组件导入书单'././components/book list/book list . vue '；//注册组件组件：{ BookList，}，//使用组件book-list/book-listvue2.0，建议导入的组件使用驼峰名称。使用时，vue可以更好地识别。

如果之前没有封装组件的代码，就不会上传，直接加载代码：

图书列表页面-book.vue

|- book.vue-html页面模板div h2欢迎来到波波图书馆！/h2！-推荐阅读-section class=' box recommend-book '！-注意：books是BookList.vue组件中的book对象数组标题是传递给组件-book-list: books='推荐数组'标题='推荐书籍'/book-list /section！-最新图书-版块类='盒子更新-图书'！-注意：books是BookList.vue组件中的book对象数组标题，这是传递给组件-book-list : books=' updatebookarray '标题='最新的书'/book-list/section/div/Template:我在模拟数据。在开发过程中，我使用api接口来获取数据。其实都是一样的。有很多代码，原理是一样的。您也可以通过查看了解json。

|- book.vue - js脚本从“图书列表”导入././components/BookLiST/BookLiST。vue '；导出默认值({ data(){ return { //推荐图书推荐darray :[{ id :1，img _ URL : ' https://ss 2。百度。com/6 onysjip 0 qiz 8 Tyhnq/it/u=671627465，1455045194fm=173s=23 a2 f 3039 c 930 EC 41 a 2d b 9090300d 093w=640h=427 img .' JPEG '，book_name:'Vuejs-1 '，book_author: '凉风波，}，{ id:2，img _ URL : ' https://ss2。百度。com/6 onysjiip 0qiz 8 tyhnq/it/u=671627465，1455045194fm=173s=23a 2f 3039 c 930 EC 41 a 2d b 90900 JPEG '，book_name:'Vuejs-2 '，book_author: '凉风波，}，{ id:3，img _ URL : ' https://ss2。百度。com/6 onysjiip 0qiz 8 tyhnq/it/u=671627465，1455045194fm=173s=23a 2f 3039 c 930 EC 41 a 2d b 90900 JPEG '，book_name:'Vuejs-3 '，book_author: '凉风波',},],//最新图书updateBookArray:[ { id:5，img _ URL : ' https://ss 2。百度。com/6 onysjip 0qiz 8 Tyhnq/it/u=671627465，1455045194fm=173s=23 a2 f 3039 c 930 EC 41 a 2d b 9090300d 093w=640h=427 img .' JPEG '，book_name:'Vuejs-5 '，book_author: '凉风波，}，{ id:6，img _ URL : ' https://ss2。百度。com/6 onysjiip 0qiz 8 tyhnq/it/u=671627465，1455045194fm=173s=23a 2f 3039 c 930 EC 41 a 2d b 909000 JPEG '，book_name:'Vuejs-6 '，book_author: '凉风波，}，{ id:7，img _ URL : ' https://ss2。百度。com/6 onysjiip 0qiz 8 tyhnq/it/u=671627465，1455045194fm=173s=23a 2f 3039 c 930 EC 41 a 2d b 909000 JPEG '，book_name:'Vuejs-7 '，book_author: '凉风波',},],} },//引入组件components:{ BookList，}，methods : { }，})/script |-book。vue-CSS样式* {边距： ^ 0；padd : 0；}李{列表式：无；} .box { height : auto order-bottom : 1px实心# efefeffmargin : 10px 0；padd : 5px 0；}/样式组件- BookList.vue

|- 组件- BookList.vue - htmltemplate div！-头部- !-这个是页面传来的标题-H3='标题' {标题} }/H3！-列表-文章='书单！-遍历图书数据-李v-for='书中书'路由器-链接：到=' { name : ' book detail '，params 3360 { id : book。id } } '！[](book.img_url)！-图书图片- {{book.book_name}}！-图书名字-/路由器-链接/李/文章/div/模板|-组件- BookList.vue - html

脚本导出默认({ //道具数据传递的意思道具：['标题',//标题' books '，//图书对象数组]，data(){ return { }，methods : { }，})/script|-组件- BookList.vue - css

样式范围/图书列表*/.书单{宽度：100%;高度：128 px显示： flex证明内容：空间环绕；} .标题{边框-左侧： 4px实心# 333;边距： 10px 0；左填充left: 4px}。书单li { width:80px高度： 100%;flex:1margin:0 10px }。书单li img { height: 100px宽度： 100%;} .书单阿利{ text-align :居中；font-size : 12px文本装饰：无；显示器：内联块；宽度： 100%;}/样式全部的代码就在这里啦，大家可以细心发现，组件封装，其实就向我们之前Java脚本语言函数封装一样，传递参数，接收参数，渲染数据，重复利用，大家可以直接复制代码运行看一下，注释有解释啦。

小干货

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

在子组件上写上名字如：

开始设置超时秒数=60 ref=' CONTiMer '/开始设置超时调用方法：这个$refs.contTimer.countTime(60)

但是

因为有数据的延迟经常会出现调用子组件的事件出现不明确的的事情：

类型错误：无法读取未定义的属性"计数时间"

解决方法是

//添加计时器settimeout (()={this。参考文献。控制定时器。counttime (60)}，20)，这是本文的全部内容。希望对大家的学习有帮助，支持我们。