快捷導(dǎo)航

vue3?setup語(yǔ)法糖中獲取slot插槽的dom對(duì)象代碼示例

更新時(shí)間：2024年04月19日 10:03:52 作者：WJP丶

slot元素是一個(gè)插槽出口,標(biāo)示了父元素提供的插槽內(nèi)容將在哪里被渲染,這篇文章主要給大家介紹了關(guān)于vue3?setup語(yǔ)法糖中獲取slot插槽的dom對(duì)象的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

最近使用vue3開(kāi)發(fā)項(xiàng)目，需要封裝一個(gè)無(wú)限滾動(dòng)的組件，使用scroll組件內(nèi)置插槽接受模板的方式，所以需要在scroll組件內(nèi)獲取到模板渲染后dom元素的寬高。

但是setup語(yǔ)法糖是組件生命周期的beforeCreate和created中，而且經(jīng)過(guò)測(cè)試，在mounted函數(shù)中的el屬性也是null，所以得出結(jié)論模板的slot.default無(wú)法直接獲取, 必須通過(guò) render 方式對(duì) slot 的 vnode 進(jìn)行渲染，然后在 render 組件中的 mounted 方法中才能獲取到。如下面的例子

容器組件 ScrollView

//ScrollView.vue  scroll容器組件
<script setup lang="ts">
 import { ref, useSlots } from 'vue'
 import createSlot from '../vnode/createSlot'
 const slot = useSlots()
 // 這里獲取到的是默認(rèn)插槽的vnode，但拿不到對(duì)應(yīng)的dom實(shí)例
 const defaultSlot = slots.default && slots.default()[0]

 // 自定義template 內(nèi)容mounted事件
 const mountedCallFun = (args)=> {
  console.log('mounted', args)
 }
 // 自定義template 內(nèi)容updated事件
 const updatedCallFun = (args)=> {
  console.log(args)
 }
 // 自定義template 內(nèi)容unMounted卸載事件
 const unmountedCallFun = (args)=> {
  console.log(args)
 }
 const mySlot = createSlot({mountedCallFun, updatedCallFun, unmountedCallFun})
 onMounted(() => {
  // 即使在該組件的mounted鉤子中，這個(gè)defaultSlot的$el依然為null
  console.log('defaultSlot', defaultSlot)
 })
</script>

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

render函數(shù)渲染slot內(nèi)容的工廠函數(shù) createSlots.ts

通過(guò) vue官方提供的 defineComponent創(chuàng)建一個(gè)組件裝載 scrollView組件中的插槽內(nèi)容：

//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
    }
  })
}

測(cè)試使用 ScrollView組件

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

<template>
  <div>
    <ScrollView>
      <h2 >測(cè)試使用 ScrollView組件測(cè)試使用 ScrollView組件</h2>
      <h2 >測(cè)試使用 ScrollView組件測(cè)試使用 ScrollView組件</h2>
      <h2 >測(cè)試使用 ScrollView組件測(cè)試使用 ScrollView組件</h2>
      <h2 >測(cè)試使用 ScrollView組件測(cè)試使用 ScrollView組件</h2>
    </ScrollView>
  </div>
</template>

總結(jié)

到此這篇關(guān)于vue3 setup語(yǔ)法糖中獲取slot插槽的dom對(duì)象的文章就介紹到這了,更多相關(guān)vue3獲取slot插槽dom對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: