vue插槽、具名插槽和作用域插槽

插槽使用场景是；如果子组件需要显示的内容并非来自本身，而是父组件传递进来的，而假如直接按下面这样写，是不可以实现的，因为如果me-component没有包含一个 <slot> 元素，则任何传入它的内容都会被抛弃：

要实现上面的使用场景，可以利用插槽：

<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 插槽还可以定义默认值，如果父组件没有对应的插槽标签，那么deom上显示的是<slot ></slot> 标签里的内容


以上代码，slot 特性的也可以直接用在一个普通的元素上。这样的话template标签对就可以去掉了

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

效果图：

本文参考自：https://www.jianshu.com/p/d8401e291258