在vue v2.6.0中奠蹬，新引入了v-slot指令瓶蚂，他取代了slot和slot-scope這兩個目前已經(jīng)被廢棄但是為被移除的特性。

使用

// 根組件
<template>
    <div>
        <mo>
            <template v-slot:header="slotProps">
                <h1>{{slotProps.header + ' ' + msg}}</h1>
                
            </template>

            <p>A paragraph for the main content.</p>
            <p>And another one.</p>

            <template v-slot:footer>
                <p>Here's some contact info</p>
            </template>
        </mo>
    </div>
</template>

<script>
    import mo from './module.vue'
    export default {
        components: {
            mo
        },
        data() {
            return {
                msg: '這是根組件的消息'
            }
        }
    }
</script>

// 子組件
<template>
    <div>
        --header start--
        <header>
            <slot name="header" :header="header"></slot>
        </header>
        --header over--
        <div></div>
        --default start--
        <slot></slot>
        --default over--
        <div></div>
        --footer start--
        <footer>
            <slot name="footer"></slot>
        </footer>
        --dooter over--
    </div>
</template>

<script>
    export default {
        data() {
            return {
                header: '來自子組件的頭部消息'
            }
        }
    }
</script>

<style scoped>

</style>

image.png

1. 組件中可以使用template標(biāo)簽，加v-slot指令制定具名插槽陡鹃，當(dāng)沒有指定插槽name時，默認(rèn)出口會帶有隱含的名字“default”抖坪。
2. 根組件可以利用v-slot:header="slotProps"接受組件中的消息萍鲸，組件中只需要在<slot name="header" :header="header"></slot>就可以了
3. 如果被提供的內(nèi)容只有一個默認(rèn)插槽時，組件的標(biāo)簽可以直接被當(dāng)做插槽的模板來使用<mo v-slot="slotProps">
4. 動態(tài)參數(shù)也可是使用到插槽當(dāng)中<mo v-slot=[dynamicSlotName]>
5. v-slot的縮寫是#擦俐，但是如果使用#的話脊阴，必須始終使用具插槽來代替
   <mo #default="slotProps">