如何在 Vue 3 中安全地访问 `<script setup>` 中的数据和方法？

在 Vue 3 中访问 <script setup> 中的数据和方法

介绍

在 Vue 3 中，<script setup> 为定义组件的逻辑和数据提供了简洁且强大的方式。然而，为了安全性和可维护性，直接在 <script setup> 中导出 ES 模块是不可能的。为了解决这一限制，Vue 提供了 defineExpose API 和其他方法，允许你在模板中访问 <script setup> 中的数据和方法。

defineExpose API

使用 defineExpose API

defineExpose API 允许你将 <script setup> 中的变量和函数公开给组件模板。这通过在 defineExpose 对象中指定要公开的属性来实现。

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

const count = ref(0)

defineExpose({
  count,
})
</script>

在模板中，你可以直接访问公开的属性，就像在 export default 对象中导出它们一样：

<template>
  <p>Count: {{ count }}</p>
  <button @click="count++">Increment</button>
</template>

Composition API

使用 Composition API

Composition API 提供了一种替代方法来将数据和方法注入组件。它利用 provide 和 inject 选项，允许你从组件的祖先上下文中访问数据。

<script setup>
import { provide, ref } from 'vue'

const count = ref(0)

provide('count', count)
</script>

在嵌套组件中，你可以使用 inject 访问注入的数据：

<script>
import { inject } from 'vue'

export default {
  setup() {
    const count = inject('count')
    return { count }
  },
}
</script>

Pinia 状态管理

使用 Pinia

如果你使用 Pinia 作为状态管理库，你可以使用 useStore 钩子将存储注入到组件中。

<script setup>
import { useStore } from 'pinia'

const store = useStore()
</script>

这将让你访问存储中的所有状态和操作。

选择正确的方法

选择哪种方法取决于你的特定用例。以下是一些指导：

• defineExpose API： 适合公开少量变量和函数，并且希望在组件模板中直接访问它们。
• Composition API： 适合将复杂数据和逻辑注入嵌套组件。
• Pinia： 适合使用 Pinia 进行集中式状态管理。

常见问题解答

1. 为什么在 <script setup> 中导出 ES 模块是不可行的？

出于安全性和维护性方面的考虑，Vue 限制了在 <script setup> 中直接导出 ES 模块，以防止意外导入和修改。

2. defineExpose 和 Composition API 有什么区别？

defineExpose API 直接在组件模板中公开数据和方法，而 Composition API 通过 provide 和 inject 选项注入数据和方法，允许在嵌套组件中访问。

3. Pinia 的优点是什么？

Pinia 提供了一个集中式状态管理系统，有助于组织和维护大型应用程序的状态。

4. 我应该始终使用 <script setup> 吗？

<script setup> 为组件的逻辑和数据提供了简洁且强大的方式，但它并不适用于所有情况。在需要复杂的逻辑或嵌套组件时，使用 Composition API 可能更合适。

5. 如何在使用 <script setup> 时处理组件间通信？

可以使用 Vuex 或 Pinia 等状态管理库，或者使用事件系统进行组件间通信。