返回列表 发帖

#$slots

类型:{ [name: string]: (...args: any[]) => Array<VNode> | undefined }
仅可读
详细:
用来访问被插槽分发的内容。每个具名插槽有其相应的 property (例如:v-slot:foo 中的内容将会在 this.$slots.foo 中被找到)。default property 包括了所有没有被包含在具名插槽中的节点,或 v-slot:default 的内容。

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

示例:
  <blog-post>
    <template v-slot:header>
      <h1>About Me</h1>
    </template>
  
    <template v-slot:default>
      <p>
        Here's some page content, which will be included in $slots.default.
      </p>
    </template>
  
    <template v-slot:footer>
      <p>Copyright 2020 Evan You</p>
    </template>
  </blog-post>
  const app = Vue.createApp({})
  
  app.component('blog-post', {
    render() {
      return Vue.h('div', [
        Vue.h('header', this.$slots.header()),
        Vue.h('main', this.$slots.default()),
        Vue.h('footer', this.$slots.footer())
      ])
    }
  })
参考
`` 组件
通过插槽分发内容
渲染函数 - 插槽

返回列表