vue slot插槽（內容分發）的使用

簡單來說，就是把父組件的被slot包裹的內容部分放置到子組件指定的位置

父組件部分

<template>
    <child-slot>
         <div class="parent">
            我是父組件的內容
        </div>
    </child-slot> 
</template>
<script>
import child from './child'   
export default {
    components:{
        'child-slot' : child
    }
}
</script>
<style>
    .parent{
        width:200px;
        height:50px;
        line-height: 50px;
        background-color: greenyellow;
        margin:0 auto;
    }
</style>

子組件部分

<template>
    <div>
        <div>我是子組件的內容1</div>
        <slot></slot> <!--slot就是父組件被slot所包裹着的內容-->
        <div>我是子組件的內容2</div>
    </div>
</template>
<script>
export default {
    
}
</script>

效果圖