Vue插槽详解

插槽：component提供的slot标签为子dom的内容提供分发的出口。

<div id="app">
    <child-component>你好</child-component>
</div>

<script>
    Vue.component('child-component',{
        template:`
            <div>Hello,World!</div>
        `
    })
    let vm = new Vue({
        el:'#app',
        data:{

        }
    })
</script>

上面的代码应该很容易看懂，我们在child-component的内容里（子dom里。。肚子里。。。额，专业的话我也不知道怎么讲）放上"你好"这句话是不会显示出来的。

这就是插槽出现的原因

Vue.component('child-component',{
        template:`
            <div>
            Hello,World!
            <slot></slot>
            </div>
        `
    })

在child-component中添加一个slot标签，这个标签为（肚子里的内容）"你好"，提供了一个出口，这样就能显示出来了；

---

上面介绍的是单个插槽，就是没有指定name的默认插槽，下面介绍具名插槽；

<div id="app">
    <blog-post>
        <div v-slot:header>我是head</div>
        <div v-slot:footer>我是foot</div>
        <div>我啥也不是</div>
    </blog-post>
</div>

    Vue.component("blogPost", {
        template: `
            <div>
            <h4>blogPost Template</h4>
            <slot name="header"></slot>
            <slot name="footer"></slot>
            <slot></slot>        
            </div>
        `
    })

在blog-post组件中我们定义了 三个插槽，前两个分别指定name，第三个为默认插槽，在肚子里，我们有三个孩子，用v-slot指令指定孩子的出口，"我是header" 走第一个插槽，"我是footer" 走第二个插槽， "我啥也不是" 走第三个默认插槽；

如果没有使用v-slot指定是哪一个插槽，就会走默认的无name插槽