Vuejs 页面的区域化与组件封装的实现
组件的好处当我用vue写页面的时候，大量的数据页面渲染，引入组件简化主页面的代码量，当代码区域块代码差不多相同时，组件封装会更加简化代码。组件是Vue.js最强大的功能之一。 组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。 我用一个读书软件的图书列表例子： 图书展示页 大家可以想想用vue如何实现这个页面的前端页面实现，再来实现逻辑功能； 图片显示的 '推荐图书' 和 '最新图书' 的列表展示是一样的，开始可以用重复的代码把先写好的 '推荐图书' 的代码复制一份就可以轻轻松松实现 '最新图书' 页面
如果其他页面也需要这个展示，或我想代码更加简洁一点，那么来组件如何封装就派上场啦 简要页面：图书列表展示页 - 图书列表组件基础部分相信使用过vue的伙计都知道如何使用，我直接上代码： 创建一个组件 - 注册组件 - 使用组件// 注册组件
components:{ BookList,},// 使用组件 vue2.0 规定引入组件建议使用驼峰命名，使用时用 - 分开，vue才更好识别 之前没封封装组件的代码就不上传了，直接上代码： 图书列表页 - book.vue 欢迎来到波波图书馆!<section class="box recommend-book"> <book-list :books="recommendArray" heading="推荐图书"> <section class="box update-book"> <book-list :books="updateBookArray" heading="最新图书"> 我是模拟数据，开发过程中是用api接口拿数据的，其实都一样，代码有点多，原理都一样，大家看一下也可以了解一下json的知识
import BookList from '../../components/bookList/BookList.vue';
export default({
data(){
return {
},// 引入组件 },})
*{
margin: 0;
padding: 0;
}
li{
list-style:none;
}
.box{
height: auto;
border-bottom: 1px solid #efefef;
margin: 10px 0;
padding: 5px 0;
}
组件 - BookList.vue <router-link :to="{ name:'BookDetail',params:{ id: book.id }}">
<a class="attachment" href="https://www.52php.cn/public/api.php?app=files&do=download&file=book.img_url&t=1608130165" target="_blank" title="点击下载[book.img_url]">book.img_url</a> <!-- 图书图片 -->
{{book.book_name}} <!-- 图书名字 -->
</router-link>
|- 组件 - BookList.vue - html
export default({
// props 数据传递的意思
props:[
'heading',//标题
'books',//图书对象数组
],data(){
return {
} |- 组件 - BookList.vue - css
/*图书列表*/
.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{ 全部的代码就在这里啦，大家可以细心发现，组件封装，其实就向我们之前JavaScript函数封装一样，传递参数，接收参数，渲染数据，重复利用，大家可以直接运行看一下，注释有解释啦。 小干货父组件 调用 子组件 方法为 ： 在子组件上写上名字 如： 调用方法： 但是 因为有数据的延迟 经常会出现调用子组件的事件出现undefined的事情：
解决方法是 {
this.$refs.contTimer.countTime(60)
},20)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
