vue插槽详解

插槽就是Vue实现的一套内容分发的API，将<slot></slot>元素作为承载分发内容的出口。

先看一段代码

<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>

这段代码运行结果： 页面显示Hello World!

如果想在组件中再添加一些内容，比如这样  你好！Hello World！

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

但事实并不会得到我们想要的结果，页面还是只显示 Hello World！

插槽的作用就是可以帮助我们在组件中添加额外的内容

修改上段代码

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

现在就会显示我们想要的结果，slot中可以随意存放各种内容，这也是插槽的主要作用。

1 默认插槽

上面这个例子就是默认插槽，没有具体名字，可以随意存放内容

2 具名插槽

有具体名字的插槽，在指定位置输出我们想要的内容 

//父组件
<div id="app">
    <child-component>
      <template slot="header">我是header</template >
      <template  slot="footer">我是footer</template >
    </child-component>
</div>

//子组件 child-component
 template:`
    <div>
        hello World!
        <slot name="header"></slot>
        <slot name="footer"></slot>
    </div>`

3 作用域插槽

这部分好难理解。。。

作用域插槽实质是为了让 插槽内容可以访问到子组件中的数据和属性

//父组件
<div id="app">
    <child-component>
      <template  v-slot:header="message">
          {{message.data}}   //拿到子组件中的数据
      </template >
    </child-component>
</div>

//子组件 child-component
 template:`
    <div>
        hello World!
        <slot name="header" :data="dataList"></slot>
    </div>`

message是子组件中绑定的属性集合，用法总结为v-slot ：（插槽名称）=后边是组件内部绑定作用域值的映射