如何在 Vue 默认插槽中调用子组件函数？

2024-07-08 15:25:48

如何在 Vue 默认插槽中调用子组件的函数？

在 Vue 应用开发中，我们经常需要在父组件中与子组件进行交互。一种常见的场景是在父组件中调用默认插槽内子组件的函数。这种需求通常出现在构建可复用组件和处理组件间通信的过程中。

本文将深入探讨如何在 Vue 默认插槽中调用子组件的公开函数。我们将提供清晰易懂的代码示例，并对关键部分进行详细解释，帮助你轻松掌握这项实用技巧。

问题情景

假设我们正在开发一个 Vue 应用，其中包含一个名为 Container 的父组件。Container 组件使用默认插槽来容纳不同的子组件，例如 ChildA 和 ChildB。这些子组件都定义了一个名为 showMessage 的函数，用于在控制台输出一条消息。

我们的目标是让 Container 组件能够直接调用插槽中任何子组件的 showMessage 函数。

解决方案：`useSlots` 与 `defineExpose`

为了实现这个目标，我们可以结合使用 Vue 提供的 useSlots 函数和 defineExpose 选项。

1. 使用 `defineExpose` 暴露子组件函数

首先，我们需要在子组件中使用 defineExpose 选项来明确哪些属性和方法可以被父组件访问。

// ChildA.vue 和 ChildB.vue
<script setup>
const message = 'Hello from Child Component!'

function showMessage() {
  console.log(message)
}

defineExpose({
  showMessage,
})
</script>

在上面的代码中，我们使用 defineExpose 选项将 showMessage 函数暴露出来。这意味着父组件可以通过子组件实例访问该函数。

2. 使用 `useSlots` 获取插槽内容

接下来，我们需要在父组件中使用 useSlots 函数来获取默认插槽的内容。

// Container.vue
<template>
  <button @click="callShowMessage">Call showMessage</button>
  <slot />
</template>

<script setup>
import { useSlots } from 'vue'

const slots = useSlots()

function callShowMessage() {
  const children = slots.default()
  if (children) {
    for (const child of children) {
      // 检查 showMessage 是否为函数
      if (typeof child.component?.exposed?.showMessage === 'function') {
        child.component.exposed.showMessage()
      }
    }
  }
}
</script>

在 Container 组件中，我们首先使用 useSlots() 获取所有插槽，然后通过 slots.default() 获取默认插槽的内容。slots.default() 返回一个 VNode 数组，每个 VNode 代表一个子组件。

3. 调用子组件函数

最后，我们遍历默认插槽中的所有子组件，并调用它们的 showMessage 函数。

// Container.vue (callShowMessage 函数内部)
for (const child of children) {
  // 检查 showMessage 是否为函数
  if (typeof child.component?.exposed?.showMessage === 'function') {
    child.component.exposed.showMessage()
  }
}

在循环内部，我们使用可选链操作符 ?. 安全地访问子组件实例上的 showMessage 函数。

child.component：获取子组件的实例。
exposed：访问子组件通过 defineExpose 暴露的属性和方法。
showMessage：调用子组件的 showMessage 函数。

在调用函数之前，我们使用 typeof ... === 'function' 检查 showMessage 是否存在并且是一个函数，以避免出现运行时错误。

示例演示

现在，让我们来看一个完整的示例：

ChildA.vue

<template>
  <div>Child A Component</div>
</template>

<script setup>
const message = 'Hello from Child A!'

function showMessage() {
  console.log(message)
}

defineExpose({
  showMessage,
})
</script>

ChildB.vue

<template>
  <div>Child B Component</div>
</template>

<script setup>
const message = 'Hello from Child B!'

function showMessage() {
  console.log(message)
}

defineExpose({
  showMessage,
})
</script>

Container.vue

<template>
  <div>
    <button @click="callShowMessage">Call showMessage</button>
    <slot />
  </div>
</template>

<script setup>
import { useSlots } from 'vue'

const slots = useSlots()

function callShowMessage() {
  const children = slots.default()
  if (children) {
    for (const child of children) {
      if (typeof child.component?.exposed?.showMessage === 'function') {
        child.component.exposed.showMessage()
      }
    }
  }
}
</script>

App.vue

<template>
  <Container>
    <ChildA />
    <ChildB />
  </Container>
</template>

<script setup>
import Container from './components/Container.vue'
import ChildA from './components/ChildA.vue'
import ChildB from './components/ChildB.vue'
</script>