一,前言

前面介绍了插槽的使用和作用域插槽,Vue还能访问clot分发的内容,
虽然在实际开发中很少会使用到这个功能,但在组件中很重要
这一篇简单介绍如果访问插槽

二,访问slot

在Vue1.x中,想要获取一个slot是很困难的,
Vue2.x提供了一个可以访问插槽内容的方法:$slots,使用也非常简单

通过$slots可以访问指定的具名slot
this.$slots.default包含所有没有被包含在具名slot中的节点

使用上一篇作用域插槽的代码进行简单修改:

<div id="app">
    <child-component>
        <h2 slot="header">标题</h2>
        <!--使用父组件数据绑定插槽变量-->
        <p>{{ message }}</p>
        <h2 slot="footer">底部</h2>
    </child-component>
</div>

<script type="text/javascript">
    Vue.component('child-component',{
        template:
        '<div class="container">' +
            '<div class="header">' +
                '<slot name="header"></slot>' +             // 具名solt-header
            '</div>' +
            '<div class="main">' +
                '<slot></slot>' +                            // 默认solt
            '</div>' +
            '<div class="footer">' +
                '<slot name="footer"></slot>' +             // 具名solt-footer
            '</div>' +
            '<div class="unknow">' +
                '<slot name="unknow">未知slot</slot>' +     // 具名solt-unknow
            '</div>' +
        '</div>',
        mounted: function () {
            // 获取具名插槽
            var header = this.$slots.header;
            var other = this.$slots.default;
            console.log(header);
            console.log(header[0].elm.innerHTML);
        }
    });

    const vm = new Vue({
        el: '#app',
        data:{
            message:'message'
        }
    })
</script>

运行结果:

通过this.$slots.header获取到的分发内容是一个数组对象
通过header[0].elm.innerHTML可以获取内容

三,结尾

本篇简单介绍了slot的访问,这部分在实际开发中很少使用
但是在render函数创建组件时会比较有用,用于独立组件开发