我们在做移动端开发时，有的页面顶部需要设置标题、返回上一页面箭头、关闭按钮等。不同的页面的标题不同，有的页面需要返回按钮、有的页面需要关闭按钮。我们可以根据需求，将其封装成TopBar组件，标题运用Vue组件的props实现动态赋值，供其他组件引用。
效果图：
TopBar.vue:
1.<template></template>
<template> <div class="top-bar" :class="[ (!hasBack && !hasClose) ? ‘center‘ : ‘between‘ ]"> <van-icon v-if="hasBack" class="back-icon" name="arrow-left" @click="goBack" /> <van-icon v-if="hasClose" class="back-icon" name="arrow-left" /> <span>{{title}}</span> <div></div> </div> </template>
注意：倒数第三行的<div></div>非常重要！ 这为下一步，为.tob-bar的{{title}}设置 flex布局的 justify-conent：center实现居中显示。如果不加，载有左侧返回箭头时，将title居中实现起来很麻烦。
2.<script></script>
props: { title: { type: String, default: ‘‘ }, hasBack: { type: Boolean, default: false }, hasClose: { type: Boolean, default: false }, },
主要是用到的props，其中title接受不同页面的标题。
3.<style></style>
<style lang="scss" scoped> .top-bar { display: flex; align-items: center; height: 11.5vw; padding: 0 3vw; background: #fff; border-bottom: 1px solid #eee; font-size: 4.5vw; box-sizing: border-box; } .center { justify-content: center; } .between { justify-content: space-between; } </style>
4.父组件引用：
组件局部注册：
<script> import TopBar from ‘@/components/TopBar‘; export default { components: { TopBar, }, } </script>
引用：
<template> <div class="city-container"> <top-bar title="城市列表" hasBack></top-bar> </div> </template>
title向props中传入静态值， hasBack无值，则默认为 true.
就到这里啦。很简单吧 ??
原文：https://www.cnblogs.com/Fcode-/p/13321726.html