如何从插槽中的子组件获取 HTMLElement？

Question

如何在插槽中获取孩子的 Dom 元素。 尝试在生命钩子 onMounted () 中获取 object 的 el vnode 属性为 null

我的组件：

<template>
   <div>{{text}}</div>
   <slot></slot>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";

export default defineComponent({
    name: "my-component",
    props: {
        text: {
            type: String,
            default: '',
            required: true,
        },
    },
    setup( _, ctx) {
        
        onMounted( () => {
            if (ctx.slots.default) {
                console.log( (ctx.slots.default()[0]) ); // <- property "el" - is null
            }
        })

    },
});
</script>

Answer 1

几个要记住的事情（对于其他想要做同样事情的人）

• ✅ 插槽 object 通过第二个参数的上下文传入
• ✅ 默认访问未命名的插槽内容
• ✅ slots.default是需要执行的 function
• ✅ slots.default()返回一个数组，因为一个 slot 可以有多个元素，在大多数情况下你只需选择[0]
• ❌ 内容只有在组件渲染后才可用。 在我使用onMounted的示例中，这可能是最简单的。
• 但是，如果传递的元素是 Vue 组件，则该元素根本不可用

该插槽可通过 function slots.default()访问，该插槽采用用于渲染插槽的数据参数。 如果您想使用渲染 function，这对于生成节点很有用，并且在很大程度上似乎只是一些暴露的内部结构。

我发现了一些技巧可以使用节点遍历来解决它。

一个（可能是更好的选择）使用子 object （ slots.default()[0].children.default()[0].el.parentElement ）

另一个使用ref和nextElementSibling 。

这个想法是您放置一个跨度（或其他一些“不可见”元素），您可以获得对使用ref的引用。 然后在onMounted处理程序中，您可以使用该元素来获取将成为下一个元素兄弟的 slot 元素。

 var app = Vue.createApp({ setup() {return {}} }); app.component("parent-component", { template: `<div><span ref="slotRef"></span><slot></slot></div>`, setup(props, ctx) { const slotRef = Vue.ref(null); // create a ref Vue.onMounted(()=>{ const defaultSlot = ctx.slots.default(); console.log(defaultSlot[0].children.default()[0].el.parentElement) // or get the parent of the first child defaultSlot[0].children.default()[0].el.parentElement.innerText += "" console.log(slotRef.value.nextElementSibling); // get the Sibling of ref slotRef.value.nextElementSibling.innerText += "" }) return {slotRef}; } }); app.component("child-component", { template: `<div><slot></slot></div>`, }); app.mount("#app");

 div{border:1px solid; padding:2px;}

 <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.prod.js"></script> <div id="app"> <parent-component> <child-component> </child-component> </parent-component> </div>