在这节课的内容开始之前，我们先完善一下titleBar的内容，作为一个顶栏，一般都有一个返回按钮，用于返回上一页，现在就把顶栏的导航按钮做出来，正好也复习一下之前学的一些内容
<template>
<div class="title-bar">
<span class="back-icon" v-if="showBackBtn" @click="onBack"></span>
<div class="page-title">
<slot>未命名页面</slot>
</div>
</div>
</template>
<script>
export default {
props: {
showBackBtn: {
type: Boolean,
default: false,
},
},
methods: {
onBack() {
// 调用返回上一页的方法
this.$router.back()
},
},
}
</script>
<style scoped>
.title-bar {
width: 100%;
height: 64px;
background-color: #ccc;
position: relative;
}
.page-title {
position: absolute;
width: 100%;
line-height: 64px;
left: 0;
top: 0;
text-align: center;
}
.back-icon {
position: absolute;
width: 25px;
height: 25px;
border-left: 2px solid #333;
border-top: 2px solid #333;
transform: rotate(-45deg);
top: 17px;
left: 17px;
z-index: 1;
cursor: pointer;
}
</style>
在使用的时候，要传递showBackBtn为true，就可以显示返回按钮了
<title-bar :showBackBtn="true"></title-bar>
具名插槽
在标题栏中除了左侧有返回按钮，右侧也经常有一些功能按钮，
比如说，个人中心的入口，
比如说，在商品列表页筛选商品的按钮，
那么现在标题栏的右侧内容也得是动态插入进来，所以我们需要在titleBar里面写两个slot了，
为了区分两个或者多个slot，这时候就要顺其自然地给slot起个名字了，
具名插槽就是有名字的插槽，下面我们来给slot起名字
<template>
<div class="title-bar">
<span class="back-icon" v-if="showBackBtn" @click="onBack"></span>
<div class="page-title">
<slot name="title">未命名页面</slot>
</div>
<div class="right-content">
<slot name="rightContent"></slot>
</div>
</div>
</template>
起名字的方式也很直接，就是在slot这个标签上加一个name属性，那name的值就是它的名字了
<slot name="rightContent"></slot>
如果没有名字的话
<slot></slot>
这样的插槽它的名字默认是default，
但是为了大家阅读理解代码方便，在使用多个slot时一定要起名字，而且要起有意义，好理解的名字，
这样别人在读你的代码，或者时间久了以后自己再读的时候，比较容易理解
现在我们起好名字了，下面就是使用了
在App.vue中修改
<title-bar :showBackBtn="true">
<template v-slot:title>商品列表</template>
<template v-slot:rightContent>
<span>筛选</span>
</template>
</title-bar>
我们看到指定名字的语法是v-slot:加上在组件内定义好的名字，
v-slot:title
v-slot:rightContent
注意他们写在一个template标签上，template标签里的内容就会插入到相应的slot中
最后效果就是
具名插槽的简写
和v-on简写成@一样，v-slot也可以简写，v-slot:===>#,
上面的v-slot:title可以简写为#title
我们再次更改App.vue的内容
<title-bar :showBackBtn="true">
<template #title>商品列表</template>
<template #rightContent>
<span>筛选</span>
</template>
</title-bar>
效果也是一样的
这节课就到这里了，主要内容就是在有多个插槽时，给每个插槽起一个名字，在插入内容时，指定插槽的名字就行了
