Lzh on GitHub

useForwardExpose

转发组件的暴露值、props 和 $el。

当构建一个组件时，如果它不是单一根节点的组件，模板引用将不会通过 $el 返回 DOM 元素（阅读更多），因此，我们需要手动转发该组件模板引用中的 $el。或者在某些情况下，您想将某个元素作为暴露元素。

此外，这个组合式函数扩展了模板引用中缺少的暴露 props 属性。

用法

<script setup lang="ts">
import { useForwardExpose } from 'reka-ui'

const selectedElementId = ref(1)
const { forwardRef } = useForwardExpose()
</script>

<template>
  <span>
    <div :ref="forwardRef">
      ...
    </div>
  </span>
</template>

例子

我们希望将一个 <button> 元素通过 expose() 向父组件公开，并能从父组件直接访问 DOM。

子组件：MyButton.vue

<script setup lang="ts">
import { useForwardExpose } from './composables/useForwardExpose' // 假设你的钩子放在 composables 文件夹中
import { onMounted, ref } from 'vue'

const buttonRef = ref<HTMLButtonElement | null>(null)

// 使用钩子处理 forwardExpose 逻辑
const { forwardRef } = useForwardExpose<HTMLButtonElement>()

// 在 mounted 时调用 forwardRef 绑定引用
onMounted(() => {
  forwardRef(buttonRef.value)
})
</script>

<template>
  <button ref="buttonRef" class="px-4 py-2 bg-blue-500 text-white rounded">
    Click Me
  </button>
</template>

父组件：App.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import MyButton from './components/MyButton.vue'

const myButtonRef = ref<{ $el: HTMLElement } | null>(null)

onMounted(() => {
  // 访问子组件暴露出来的 DOM 元素
  console.log('Button DOM Element:', myButtonRef.value?.$el)
  myButtonRef.value?.$el?.focus() // 访问子组件的 DOM 元素并调用 focus() 方法
})
</script>

<template>
  <div class="p-4">
    <MyButton ref="myButtonRef" />
  </div>
</template>