插槽：
概念：就是子組件中的提供給父組件使用的一個(gè)占位符，用<slot></slot>表示，父組件可以在這個(gè)占位符中填寫任何模板代碼，如html,組件等，填充的內(nèi)容會替換子組件的<slot></slot>標(biāo)簽

簡單dome:

創(chuàng)建一個(gè)子組件：child.vue
<template>
<div>
<h1>你猜我是誰：</h1>
<slot></slot>
</div>
</template>

創(chuàng)建一個(gè)父組件：fater.vue
<template>
<div>教你如何使用slot插槽</div>
<div>
<child>
<div>你猜我猜不猜你是誰？哈哈哈！</div>
</child>
</div>
</template>

項(xiàng)目實(shí)例：封裝移動端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>