Vue - стандартная практика при доступе к слотам

Question

Является ли следующая стандартная практика при попытке доступа к слотам?

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

Answer 1

Как я заметил в комментарии, вы не можете рассчитывать на заполнение слота одним элементом DOM; родитель может использовать <template> для объединения нескольких элементов вместе. В этом случае вам не нужно положение первого элемента в слоте.

Альтернативный подход - заключить слот в элемент <div>, определить ссылку на него <div>, а затем получить доступ к позиции ссылки:

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

А потом в вашем коде:

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

Answer 2

Вы можете просто использовать имя слота.

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