时间戳

首页 > 解决方案 > Vue - 访问插槽时的标准做法

vue.js - Vue - 访问插槽时的标准做法

问题描述

尝试访问插槽时，以下是公认的标准做法吗？

    const slotElement = this.$slots['slot-name'][0].elm;
    const value = this.getSomething(slotElement);

标签： vue.jsvuejs2

解决方案

您可以简单地使用插槽名称。

this.$slots.slotName // named slot
this.$slots.default // default slot

来自api的示例：

<blog-post>
  <h1 slot="header">
    About Me
  </h1>

  <p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p>

  <p slot="footer">
    Copyright 2016 Evan You
  </p>

  <p>If I have some content down here, it will also be included in vm.$slots.default.</p>.
</blog-post>

Vue.component('blog-post', {
  render: function (createElement) {
    var header = this.$slots.header
    var body   = this.$slots.default
    var footer = this.$slots.footer
    return createElement('div', [
      createElement('header', header),
      createElement('main', body),
      createElement('footer', footer)
    ])
  }
})

推荐阅读