网站建设方案项目书,一个网站的二级目录在另一台服务器上_怎么做,wordpress同类,怎么做自助交易网站大家在做前端项目开发的时候#xff0c;经常会遇到公用的一些页面#xff0c;比如搜索、列表、商品详情卡片、评论列表等。为了提高开发效率、使代码看起来更加简洁#xff0c;这个时候封装相应的组件是最好的解决方案。今天小编给大家介绍一下如何在uniapp中封装组件#… 大家在做前端项目开发的时候经常会遇到公用的一些页面比如搜索、列表、商品详情卡片、评论列表等。为了提高开发效率、使代码看起来更加简洁这个时候封装相应的组件是最好的解决方案。今天小编给大家介绍一下如何在uniapp中封装组件希望对大家能有所帮助1、在components目录新建card.vue 组件template view classlistv-foritem in resDataview classitem tap$toPage(item.url)view classtitle text-ellipsis{{item.title}}/viewview classcontent flex-rowview classinfoview classsummary{{item.digest}}/viewview classflex-rowtext classdate{{item.publishDate}}/texttext classviews{{item.viewCount}} 阅读/text/view/viewview classcoverimage classimg :srcitem.imgUrl/image/view/view/view /view
/templatescriptexport default {propsData:{resData:[] /*接收传递的参数*/}}
/scriptstyle langscss scoped
.item{padding: 30rpx;margin-bottom: 30rpx;background-color: #FFF;.title{font-weight: bold;padding-bottom: 30rpx;border-bottom: 2rpx solid #F5F5F5;}.content{padding-top: 30rpx;align-items: flex-start;.info{width: calc(100% - 160rpx);.summary{color: #777;height: 80rpx;font-size: 24rpx;line-height: 1.6;margin-bottom: 10rpx;include text-ellipsis(2);}.date{font-size: 24rpx;color: $main-color;opacity: 0.6;}.views{color: #999;font-size: 24rpx;}}.cover{width: 140rpx;height: 120rpx;.img{width: 100%;height: 100%;border-radius: 4rpx;}}}
}
/style2、新建index.vue 页面templateview classcontainer!--组件引用--card :resDatabackendData /card /view
/templatescriptexport default {data() {return {backendData: []}},onLoad() {this.initData();},methods: {async initData() {//通过请求获取数据给页面的数据赋值 this.backendData res.data.list; }}}
/scriptstyle langscss scoped
/style3、组件引用方式1、全局注册方式 main.js直接导入每个页面都可以直接调用import card from ./components/card/card.vueVue.component(card,card)2、局部注册方式通过uniapp的easycom可以简化组件的引用如果你创建的组件在components目录下符合 components/组件名称/组件名称.vue 目录结构就可以在页面直接使用不需要在单独引用组件。uniapp默认是开启easycom配置的。所以可以直接使用。传统的引用方式script
import cardfrom/components/card/card.vue //1.vue方式导入组件
exportdefault{ components:{card} //2.vue 方式注册组件
/scriptIT技术分享社区个人博客网站https://programmerblog.xyz文章推荐程序员效率画流程图常用的工具程序员效率整理常用的在线笔记软件远程办公常用的远程协助软件你都知道吗51单片机程序下载、ISP及串口基础知识硬件断路器、接触器、继电器基础知识
