插槽使用場景是；如果子組件需要顯示的內(nèi)容并非來自本身，而是父組件傳遞進來的，而假如直接這樣寫，是不可以實現(xiàn)的，因為如果me-component沒有包含一個 <slot> 元素，則任何傳入它的內(nèi)容都會被拋棄：

image.png

要實現(xiàn)上面的使用場景，可以利用插槽：

 <div id="app">
        <me-component>
            <h1>我是header</h1>  
        </me-component>
    </div>
<script >
    Vue.component('me-component', {         
        template:
                `<div>
                    <p>你好</p>
                    <slot></slot> 
                </div>`
    })
    var vm = new Vue({
        el:"#app"
    })
</script >

但是，假如使用多個插槽的時候，就需要用具名插槽

 <div id="app">
        <me-component>
            <h1 slot="header">我是header</h1>  
            <h1 slot="footer">我是footerr</h1>
        </me-component>
    </div>
<script >
    Vue.component('me-component', {         
        template:
                `<div>
                    <p>你好</p>
                    <slot name="header"></slot> 
                    <slot name="footer"></slot> 
                </div>`
    })
    var vm = new Vue({
        el:"#app"
    })

另外slot 插槽還可以定義默認值，如果父組件沒有對應(yīng)的插槽標簽，那么deom上顯示的是<slot ></slot> 標簽里的內(nèi)容

20180820165846.png

20180820165856.png

以上代碼，slot 特性的也可以直接用在一個普通的元素上。這樣的話template標簽對就可以去掉了

<h1 slot-scope="resave" >{{resave.item}}</h1>  

效果圖：

20180820172853.png