插槽：
概念：就是子组件中的提供给父组件使用的一个占位符，用<slot></slot>表示，父组件可以在这个占位符中填写任何模板代码，如html,组件等，填充的内容会替换子组件的<slot></slot>标签
简单dome:
创建一个子组件：child.vue
<template>
<div>
<h1>你猜我是谁：</h1>
<slot></slot>
</div>
</template>
创建一个父组件：fater.vue
<template>
<div>教你如何使用slot插槽</div>
<div>
<child>
<div>你猜我猜不猜你是谁？哈哈哈！</div>
</child>
</div>
</template>
项目实例：封装移动端app头部
子组件：head.vue
<template>
<div class="head">
<div class="left" @click="goBack">
<img :src="imgUrl" alt="">
<div class="font-14">{{title}}</div>
</div>
<div class="font-14">{{titleName}}</div>
<div class="right">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props:{
imgUrl:{
type:String,
default:null
},
title:{
type:String,
default:null
},
titleName:{
type:String,
default:null
}
},
data(){
return{
}
},
methods:{
goBack(){
this.$router.go(-1);
}
}
}
</script>
<style lang="scss" scoped>
*{
margin:0;
padding:0;
}
.head{
height:.43rem;
background:#efefef;
display: flex;
justify-content: space-between;
align-items: center;
padding:0 .15rem;
.left{
display: flex;
img{
display: inline-block;
width:.14rem;
height: .15rem;
margin-right:.03rem;
border:0;
}
}
}
</style>
