vue.js - 如何从插槽中的子组件获取 HTMLElement？

Question

如何获取插槽中 child 的 Dom 元素。试图在life hook onMounted()中获取一个对象的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

要记住的几件事(对于其他想做同样事情的人)

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

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

我发现了一些使用节点遍历来绕过它的技巧。

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

另一个使用 ref 和 nextElementSibling。

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

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>