Preface
Recently, using vue3 development project, we need to encapsulate an infinite scrolling component and use the built-in slot of the scroll component to accept templates, so we need to obtain the width and height of the dom element after the template rendering in the scroll component.
However, the setup syntax sugar is the beforeCreate and created of the component life cycle. After testing, the el attribute in the mounted function is also null. Therefore, it is concluded that the template cannot be directly retrieved. The vnode of slot must be rendered through the render method, and then it can be obtained in the mounted method in the render component. As shown in the following example
Container Component ScrollView
// scroll container component<script setup lang="ts">
import { ref, useSlots } from 'vue'
import createSlot from '../vnode/createSlot'
const slot = useSlots()
// What you get here is the default slot vnode, but you can't get the corresponding dom instance const defaultSlot = && ()[0]
// Custom template content mounted event const mountedCallFun = (args)=> {
('mounted', args)
}
// Custom template content updated event const updatedCallFun = (args)=> {
(args)
}
// Custom template content unMounted uninstall event const unmountedCallFun = (args)=> {
(args)
}
const mySlot = createSlot({mountedCallFun, updatedCallFun, unmountedCallFun})
onMounted(() => {
// Even in the mounted hook of the component, the $el of this defaultSlot is still null ('defaultSlot', defaultSlot)
})
</script>
<template>
<div>
<mySlot :vnode="defaultSlot"></mySlot>
</div>
</template>
The render function renders the factory function that renders the slot content
Create a component to load the slot content in the scrollView component through the defineComponent provided by vue:
//
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){
(props, ctx)
},
mounted() {
// (this.$el)
mountedCallFun(this.$el)
},
render(props: any, ctx: any) {
(props, ctx)
return
}
})
}
Testing the ScrollView component
<script setup lang="ts">
import Text from '../components/'
import ScrollView from '../components/'
</script>
<template>
<div>
<ScrollView>
<h2 >Test usage ScrollViewComponentsTest usage ScrollViewComponents</h2>
<h2 >Test usage ScrollViewComponentsTest usage ScrollViewComponents</h2>
<h2 >Test usage ScrollViewComponentsTest usage ScrollViewComponents</h2>
<h2 >Test usage ScrollViewComponentsTest usage ScrollViewComponents</h2>
</ScrollView>
</div>
</template>Summarize
This is the article about obtaining the dom object of the slot slot in the vue3 setup syntax sugar. For more related content of the vue3 setup slot dom object, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!