uni-app中this.$slots.get('default')如何获取对应的dom

uni-app中this.$slots.get(‘default’)如何获取对应的dom

操作步骤：

  • 打印this.$slots.get(‘default’)

预期结果：

  • 获取到插槽dom

实际结果：

  • 无法获取

bug描述：

  • 打印this.$slots.get(‘default’)为{“getInvoke”:"f () { [native code] } ",“get_c”:"f () { [native code] } ",“get_d”:"f () { [native code] } ",“get_n”:"f () { [native code] } ",“setInvoke”:"f () { [native code] } ",“set_c”:"f () { [native code] } ",“set_d”:"f () { [native code] } ",“set_n”:"f () { [native code] } "}
  • 应该如何获取dom，需求获取dom然后判断里面有没有包含text的标签

更多关于uni-app中this.$slots.get('default')如何获取对应的dom的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app中this.$slots.get('default')如何获取对应的dom的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，this.$slots 是 Vue 实例的一个属性，用于访问组件的插槽内容。this.$slots.default 通常是用于访问默认插槽的内容。

然而，this.$slots.default 返回的是一个 VNode 数组，而不是直接的 DOM 元素。如果你想获取这些 VNode 对应的 DOM 元素，你可以使用 Vue 的 ref 机制或者通过 $el 属性来访问 DOM。

以下是一个示例，展示如何获取默认插槽对应的 DOM 元素：

<template>
  <div ref="slotContainer">
    <slot></slot>
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取默认插槽对应的 DOM 元素
    const slotElements = this.$refs.slotContainer.children;
    console.log(slotElements);
  }
}
</script>
回到顶部