• vm.$slots

    vm.$slots

    • 类型：{ [name: string]: ?Array<VNode> }

    • 只读

    • 详细：

    用来访问被插槽分发的内容。每个具名插槽 有其相应的属性 (例如：v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)。default 属性包括了所有没有被包含在具名插槽中的节点，或 v-slot:default 的内容。

    Note: v-slot:foo is supported in v2.6+. For older versions, you can use the deprecated syntax.

    在使用渲染函数书写一个组件时，访问 vm.$slots 最有帮助。

    • 示例：
    1. <blog-post>
    2.   <template v-slot:header>
    3.     <h1>About Me</h1>
    4.   </template>
    6.   <p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p>
    8.   <template v-slot:footer>
    9.     <p>Copyright 2016 Evan You</p>
    10.   </template>
    12.   <p>If I have some content down here, it will also be included in vm.$slots.default.</p>.
    13. </blog-post>
    1. Vue.component('blog-post', {
    2.   render: function (createElement) {
    3.     var header = this.$slots.header
    4.     var body   = this.$slots.default
    5.     var footer = this.$slots.footer
    6.     return createElement('div', [
    7.       createElement('header', header),
    8.       createElement('main', body),
    9.       createElement('footer', footer)
    10.     ])
    11.   }
    12. })

    • 参考：

      • <slot> 组件
      • 通过插槽分发内容
      • 渲染函数 - 插槽