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对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
本篇文章主要介绍了详解使用vue-router进行页面切换时滚动条位置与滚动监听事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。2017-03-03vue video和vue-video-player实现视频铺满教程
这篇文章主要介绍了vue video和vue-video-player实现视频铺满教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论