vue组件化中slot的用法

slot可以在子组件中开启插槽，在父组件引用该组建时，可以定义这个插槽内要展现的功能或模块

1.单个slot

子组件中在相应位置写slot标签，父组件在引用子组件时，在子组件标签内写要插入插槽的元素； 还可以设置slot在父组件没有设置插槽时，子组件的插槽默认显示内容； 父组件.vue

​

​
复制代码

子组件childComponment.vue

​

复制代码

2.具名slot（同时使用多个插槽）

给slot指定一个名称，可以分发多个slot插槽，但是只能有一个无名slot； 父组件的slot插槽内容，不写slot="xxx"的都会插到子组件的无名slot中; 如果没有指定无名slot（默认slot），父组件内多余的内容将会被抛弃。

​

​
复制代码

子组件

​


复制代码

3.作用域插槽

​

​
复制代码

子组件

复制代码

Tips: 作用于插槽也可是具名插槽

案例：列表组件

这是作用于插槽使用最多的案例，允许组件自定义应该如何渲染组件的每一项。

复制代码

子组件myList.vue

复制代码

其实上面的案例可直接在父组件中for循环就好，此处只是作为演示slot的作用域插槽； 实际开发中作用域插槽的使用场景主要为：既可以复用子组件的slot，又可以使slot内容不一致。

4.访问slot

vue2.0提供了$slot方法来访问slot 此处代码以**“具名slot（同时使用多个插槽）”**的代码为例，修改一下子组件childComponment.vue

export default {
    name: "childComponment",
    data(){
        return {
            message: ''
        }
    },
    mounted(){
        let header = this.$slots.header
        let main = this.$slots.default
        let footer = this.$slots.footer
        console.log(header)
        console.log(main)
        console.log(footer)
        console.log(footer[0].elm.innerHTML)
    }
};
复制代码

打印结果：

其中elm的内容为插槽内容，结构如下：

转载于:https://juejin.im/post/5cc856a76fb9a0321141bc32