vue3 setup语法糖中获取slot插槽的dom对象代码示例
作者：WJP丶
slot元素是一个插槽出口,标示了父元素提供的插槽内容将在哪里被渲染,这篇文章主要给大家介绍了关于vue3 setup语法糖中获取slot插槽的dom对象的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
前言
最近使用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>总结
到此这篇关于vue3 setup语法糖中获取slot插槽的dom对象的文章就介绍到这了,更多相关vue3获取slot插槽dom对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！