VueJS 3:访问插槽中的根HTML元素

Question

如何可靠地访问插槽中的根HTML元素？我尝试了slots.default(([0].el，但它不一致。我意识到，如果slot是一个简单的html，它就不是null，这很好，但如果它有一些vue指令或组件，它就会是null。那么，我怎样才能可靠地获取插槽中的根HTML元素呢？

Answer 1

我找到了一个可能的解决方案：让slot内容提供程序通过提供一个slot-prop方法来显式设置要引用的元素。此外，由于Vue 3模板支持多个根元素，因此假设插槽总是有一个根元素并不是真正可靠的。

以下是解决方案的示例：

<template>
<slot :set-element="(el) => element = el"></slot>
</template>
<script setup lang="ts">
import { ref, watchEffect } from "vue";
const element = ref<Element | null>(null);
watchEffect(() => {
console.log(element.value);
});
</script>

在组件的使用中，注入插槽道具并使用Function Refs语法

<MyComponent v-slot="{ setElement }">
<div :ref="(el) => setElement(el)">...</div>
<div>...</div>
</MyComponent>

Answer 2

您可以使用插槽的vnode属性直接访问插槽的根HTML元素，在组件脚本中，您可以使用它$参考文献root.

这里有一个例子：

<template v-slot:[slotName]="{ vnode }">
<div ref="root">
<!-- your slot content goes here -->
</div>
</template>
mounted() {
const root = this.$refs.root as HTMLElement;
console.log(root);
}

编辑

v-slot的官方文档可以在这里找到：https://vuejs.org/api/built-in-directives.html#v-槽

相反，$refs的官方文档可以在这里找到：https://v3.vuejs.org/guide/composition-api-template-refs.html