在做项目的过程中我们会遇到很多重复性的功能或者页面布局，我们可以把这些可以进行多次使用的代码进行封装，变成组件。
这是一个头部卡片组件在制作页面时经常会用到类似这种的卡片头部样式，可能参数不同，但是排布，样式是一样的
<template> <div class="title"> <div class="heda"> <img v-if="userPortrait" class="imgurl" :src="userPortrait" alt="用户头像" /> <span v-if="!userPortrait" class="van-icon van-icon-manager" /> </div> <div class="name-part"> <div class="h3"> {{ userName }} <div v-if="party" class="party"> <span class="icons icon-dangyuan " /> </div> </div> <div class="time"> <div class="left-part"> <span v-if="isshowphone" class="right">{{ userPhone }}</span> <span v-if="isshowaddress" class="right">{{ address }}</span> <span v-if="isshowcreatedate" class="right">{{ createdate }}</span> </div> </div> </div> <!--如果isshowstatus为true显示状态--> <div v-if="isshowstatus" class="status"> {{ statusinfo(status) }} </div> <!--如果isshowtime为True显示时间--> <div v-if="isshowtime" class="status"> {{ settime }} </div> </div></template><script>export default { name: "gridList", props: { userName: String, //名字 party: Boolean, //是否显示LOGO userPortrait: String, //头像 createdate: String, //发布时间 status: Number, isshowcreatedate: { type: Boolean, default: false }, isshowphone: { type: Boolean, default: false }, isshowaddress: { type: Boolean, default: true }, isshowtime: { type: Boolean, default: true }, isshowstatus: { type: Boolean, default: false }, userPhone: String, address: String, settime: String }, data() { return {}; }, methods: {}, computed: { statusinfo() { return function(status) { if (status == 0) { return "求助中"; } else if (status == 1) { return "代办中"; } else if (status == 2) { return "已完成"; } else if (status == 3) { return "已评价"; } }; } }};</script><style lang="scss" scoped>.h3 { color: #232323; font-size: 14px; font-weight: normal; padding: 0; width: 65%; float: left; margin-left: 10px; line-height: 20px; text-align: left; display: inline-flex; margin-top: 3px;}.title { min-height: 19vw; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; width: 100%; background: white;}.name-part { display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; position: relative; top: 0.66667vw; width: calc(100% - 37vw);}.hrs { background: #eee; width: 95%; height: 0.1px; margin: auto;}.status { color: #52c486; font-size: 14px; width: 86px; text-align: right;}.time { font-size: 3.2vw; font-family: MicrosoftYaHei; color: #7f7f7f; margin-left: 2.66667vw; width: 100%;}.left-part { max-width: 80%; overflow: hidden; display: flex; flex-flow: row wrap; justify-content: start; align-items: center; .tag { padding: 2px 4px; margin: 2px; color: #07c160; border: #07c160 1px solid; border-radius: 10px; }}.heda { width: 45px; height: 45px; border-radius: 100%; float: left; display: block; margin: 0; position: relative; background: #ccc; text-align: center; margin-top: 5px;}.img { height: 100%; width: 100%; border-radius: 100%; position: absolute; left: 0;}.columnName { color: #fff; position: absolute; right: 0; top: 50%; transform: translate(0, -70%); background: #ff8200; line-height: 24px; border-radius: 12px; font-size: 12px; padding: 0 8px; text-align: center;}.van-icon-manager { font-size: 34px; color: #999; position: relative; top: 3px;}.party { height: 17px; width: 17px; color: #ffd700; margin-left: 2px; display: flex; justify-content: center; align-items: center; .icons { font-size: 14px; }}.h2 { color: #5a5a5a; font-size: 16px; font-weight: normal; padding: 0; line-height: 22px; text-align: left;}.textOverflowHidden { text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}.zoom { width: 112px; height: 81px; text-align: left; float: left;}.info { width: 100%; min-height: 120px;}.imgurl { height: 100%; width: 100%; border-radius: 100%; left: 0;}.img { width: 31.3%; height: 85px; margin: 10px 2% 0.5%; border-radius: 5px;}.content-container { margin-left: 3.66667vw; float: left; width: 220px; min-height: 120px; word-wrap: break-word; margin-top: 10px;}</style> 调用自定义组件 <template> <div class="t-info"> <cardtitle v-for="item in listData" :key="item.id" :userName="item.userName" :party="item.party" :userPortrait="item.userPortrait" :createdate="item.createdate" :settime="settime" :address="address" :isshowstatus="true" :isshowtime="flase" /> </div></template><script>//如果在同一文件夹下的组件import cardtitle from "./cardtitle";//在别的文件夹下的组件import cardtitle from "../card/cardtitle";export default { name: "gridList", components: { cardtitle,}, data() { return { listData:[]//可以调用接口添加数据或者直接自定义数组里的参数和值 }; }, methods: {}, computed: {}};</script><style lang="scss" scoped>.t-info { width: 100%; background-color: white;}</style>