引用 vue 中的命名槽答案

【问题标题】：Referencing to named slots in vue引用 vue 中的命名槽
【发布时间】：2021-10-07 08:42:42
【问题描述】：

我有一个带有 2 个插槽的 vue 组件（两个插槽都已填充），我需要获取相对于页面的位置（例如使用 getBoundingClientRect 方法），但我什至无法访问 watchable 插槽与refs。没有this.$el.querySelector 方法有什么办法吗？

<template>
    <div class="watchable-container">
        <slot name="watchable" ref="refWatchable"></slot>
        <div class="bubble-container">
            <div class="bubble">
                <slot name="content">

                </slot>
            </div>
            <div class="bubble-tail"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: "BubblePopover",
    mounted() {
        console.log(this.$slots)
        console.log(this.$refs);
    },
}
</script>

【问题讨论】：

问题是，slots 不渲染，只渲染它们的内容。所以你需要引用像<div class="bubble">这样的包装器。
谢谢，是的，我做到了，但我看到人们在互联网上使用了elm 插槽的属性，但我总是在那里不确定。我以为我做错了什么
今天也遇到了一些问题，尝试使用嵌套的slots。所以我感觉到你了。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

this.$slots 成员应该可以工作。

this.$slots.watchable
// or
this.$slots.watchable.$el

尝试在您的挂载函数中使用nextTick 以提供时间来渲染。

mounted() {
  nextTick(()=>{
     // your code here
  })
}

您还可以从插槽内容中添加一个 ID，并通过getElementById 访问它

另一种选择是使用组合 API 插件，然后从 ref 访问内容。

【讨论】：

是vue2，这里没有组合API。我想过通过 ID 获取元素，但我希望 vue 有更舒适的方式。我添加了一个包装器并引用了它们，这很有效
我一直在 vue2 中使用组合 API。你可以添加它。它也很棒。
github.com/vuejs/composition-api
你 csn 也尝试将 nextTick 放入你的挂载函数中。