vue3的setup 语法糖中获取slot 插槽的dom对象

本文链接：https://blog.youkuaiyun.com/shuzhong_wjp/article/details/129851843

在Vue3中开发时，作者遇到一个问题，需要在Scroll组件内部获取模板渲染后的DOM元素宽高。由于模板的slot在setup阶段不可用，作者发现必须通过render函数处理vnode并在mounted生命周期钩子中才能访问到DOM。文章详细描述了如何使用createSlot工厂函数来创建组件并监听mounted等生命周期事件以实现这一目标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近使用vue3开发项目，需要封装一个无限滚动的组件，使用scroll组件内置插槽接受模板的方式，所以需要在scroll组件内获取到模板渲染后dom元素的宽高。
但是setup语法糖是组件生命周期的beforeCreate和created中，而且经过测试，在mounted函数中的el属性也是null，所以得出结论模板的slot.default无法直接获取, 必须通过 render 方式对 slot 的 vnode 进行渲染，然后在 render 组件中的 mounted 方法中才能获取到。如下面的例子

容器组件 ScrollView

//ScrollView.vue  scroll容器组件
<script setup lang="ts">
 import { ref, useSlots } from 'vue'
 import createSlot from '../vnode/createSlot'
 const slot = useSlots()
 // 这里获取到的是默认插槽的vnode，但拿不到对应的dom实例
 const defaultSlot = slots.default && slots.default()[0]

 // 自定义template 内容mounted事件
 const mountedCallFun = (args)=> {
  console.log('mounted', args)
 }
 // 自定义template 内容updated事件
 const updatedCallFun = (args)=> {
  console.log(args)
 }
 // 自定义template 内容unMounted卸载事件
 const unmountedCallFun = (args)=> {
  console.log(args)
 }
 const mySlot = createSlot({mountedCallFun, updatedCallFun, unmountedCallFun})
 onMounted(() => {
  // 即使在该组件的mounted钩子中，这个defaultSlot的$el依然为null
  console.log('defaultSlot', defaultSlot)
 })
</script>

<template>
  <div>
    <mySlot :vnode="defaultSlot"></mySlot>
  </div>
</template>

render函数渲染slot内容的工厂函数 createSlots.ts

通过 vue官方提供的 defineComponent创建一个组件装载 scrollView组件中的插槽内容：

//createSlots.ts
import { defineComponent, h } from "vue"
type CallFun = (vnodeEl: HTMLElement) => void
type Funs = Record<'mountedCallFun'| 'updatedCallFun'| 'unmountedCallFun', CallFun>
export default ({mountedCallFun, updatedCallFun, unmountedCallFun}: Funs) => {
  return defineComponent({
    props: ['vnode'],
    setup(props, ctx){
      console.log(props, ctx)
    },
    mounted() {
      // console.log(this.$el)
      mountedCallFun(this.$el)
    },
    render(props: any, ctx: any) {
      console.log(props, ctx)
      return props.vnode
    }
  })
}

测试使用 ScrollView组件

<script setup lang="ts">
  import Text from '../components/text.vue'
  import ScrollView from '../components/ScrollView.vue'
</script>

<template>
  <div>
    <ScrollView>
      <h2 >测试使用 ScrollView组件测试使用 ScrollView组件</h2>
      <h2 >测试使用 ScrollView组件测试使用 ScrollView组件</h2>
      <h2 >测试使用 ScrollView组件测试使用 ScrollView组件</h2>
      <h2 >测试使用 ScrollView组件测试使用 ScrollView组件</h2>
    </ScrollView>
  </div>
</template>