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

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

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

---

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

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

示例来自：

关于我
以下是一些页面内容，它们将包含在vm.$slots.default中，因为它不在指定的插槽中


版权所有2016 Evan You

如果我在这里有一些内容，它也将包含在vm.$slots.default.
中。
Vue.component（'blog-post'{
渲染：函数（createElement）{
var header=此。$slots.header
var body=此。$slots.default
var footer=此。$slots.footer
返回createElement（'div'[
createElement（'标题'，标题），
createElement（“主体”，主体），
createElement（'页脚'，页脚）
])
}
})

正如我在一篇评论中所指出的，您不能指望一个插槽被一个DOM元素填满；父级可能使用

将多个元素捆绑在一起。在这种情况下，您不需要插槽中第一个元素的位置

另一种方法是使用

元素包装插槽，定义对该

的引用，然后访问引用的位置：

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

---

尽量不要直接与DOM元素交互，因为它是Vue中的反模式。您需要从插槽中获取什么才能访问该参考底图元素？不，很遗憾。那不是个好主意。插槽可能会填充多个元素（例如，如果父级使用

。使用此选项，$slots.slotName返回[Vnode，\u rendered:true]的数组）.为了访问该元素，我发现自己必须索引；有更好的方法吗？您在哪里使用？它的使用基本上与示例中的一样在渲染中。我试图访问插槽的元素以获取其位置，以便相对于该插槽定位另一个元素。

this.$slots.slotName.parentNode

？

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

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