Question

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

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

Answer 1

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

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)
    ])
  }
})

Answer 2

正如我在评论中指出的那样，您不能指望用单个DOM元素填充的插槽；父级可能正在使用<template>将多个元素捆绑在一起。在这种情况下，您将不需要第一个元素在插槽中的位置。

另一种方法是用<div>元素包装广告位，定义对该<div>的引用，然后访问引用的位置：

<div ref="slotWrapper">
    <slot name="slot-name"/>
</div>

然后在您的代码中：

rect = this.$refs.slotWrapper.getBoundingClientRect();

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

2 个答案: