v-slot插槽新增

在vue v2.6.0中，新引入了v-slot指令，他取代了slot和slot-scope这两个目前已经被废弃但是未被移除的特性。

  // 根组件
<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>

• 组件中可以使用template标签，加v-slot指令制定具名插槽，当没有指定插槽name时，默认出口会带有隐含的名字“default”。
• 根组件可以利用v-slot:header=”slotProps”接受组件中的消息，组件中只需要在就可以了
• 如果被提供的内容只有一个默认插槽时，组件的标签可以直接被当做插槽的模板来使用
• 动态参数也可是使用到插槽当中
• v-slot的缩写是#，但是如果使用#的话，必须始终使用具插槽来代替