vue使用slot封装navBar

1、创建navBar.vue文件

<template><div><div class="headerBar"><div><div v-if="showLeft" class="left"><div v-if="leftText">{{ leftText }}</div><slot name="left" v-else ></slot></div></div><div class="title"><div v-if="title">{{ title }}</div><slot name="title" v-else></slot></div><div><div v-if="showRight" class="right"><div v-if="rightText"> {{ rightText }} </div><slot name="right" v-else ></slot></div></div></div></div>
</template><script>
export default {name: "index",props: {// 标题title: {type: String,default: '',},// 左侧显示内容leftText: {type: String,default: '',},// 是否显示左侧内容showLeft: {type: Boolean,default: true,},// 右侧内容rightText: {type: String,default: '',},// 是否右侧内容showRight: {type: Boolean,default: true,},}
}
</script><style scoped lang="scss">
.headerBar{background: #4B9EFC;color: #fff;display: flex;justify-content: space-between;align-items: center;padding: 5px 15px;box-sizing: border-box;.left{cursor: pointer;padding: 10px;box-sizing: border-box;}.right{cursor: pointer;padding: 10px;box-sizing: border-box;}
}
</style>

2、在页面使用页面中引入并使用

<template><div><header-bar title="" leftText="<" right-text="我是右侧">
<!--          <template #left><el-button>我是个按钮</el-button></template>--><template #title><el-input></el-input></template><!--          <template #right><el-input></el-input></template>--></header-bar></div>
</template><script>
import HeaderBar from './components/headerBar/index.vue'
export default {name: "index",components: {HeaderBar,}
}
</script><style scoped></style>