Laucher

2021年 03月 20日

0

Vue3的script-setup 模式中父组件获取子组件的数据

在 Vue 3 中，Script-Setup 模式为我们提供了一种全新的组件编写方式，结合 Composition API 的优势，使得组件的逻辑更加清晰和易于维护。然而，在父组件中获取子组件的数据在 Script-Setup 模式下稍有不同。本文将介绍如何使用 defineExpose 宏方法在 Script-Setup 模式下实现父组件获取子组件数据的功能。

Script-Setup 模式简介

在 Vue 3 中，Script-Setup 模式通过使用 <script setup> 标签来代替传统的 <script> 标签，将模板、状态和行为逻辑都放在一个地方。这种模式使得代码更加紧凑和可读，并且提供了更好的 TypeScript 支持。

defineExpose 宏方法

在 Script-Setup 模式中，子组件通过使用 ‘defineExpose’ 宏方法来显式地暴露内部数据和方法给父组件。这样父组件就能够通过子组件的引用来直接访问子组件的数据。

下面是一个简单的示例，展示了如何在子组件中使用 ‘defineExpose’ 宏方法暴露数据给父组件：

<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>

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

const count = ref(0);

const increment = () => {
  count.value++;
};

defineExpose({
  count,
  increment
});
</script>

在上面的例子中，子组件暴露了 ‘count’ 和 ‘increment’ 两个数据给父组件使用。

父组件获取子组件数据

一旦子组件通过 ‘defineExpose’ 宏方法暴露了数据，父组件就可以使用子组件的引用来访问这些数据。

下面是一个父组件的示例，展示了如何通过子组件的引用获取子组件的数据：

<template>
  <div>
    <ChildComponent ref="child" />
    <button @click="logChildCount">Log Child Count</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const child = ref(null);

const logChildCount = () => {
  if (child.value) {
    console.log(child.value.count.value);
  }
};
</script>

在上面的例子中，通过使用 ‘ref’ 函数将子组件的引用保存在 ‘child’ 变量中。然后，我们可以通过 ‘child.value’ 来访问子组件的实例，并进一步访问子组件的数据，如 ‘child.value.count.value’。

注意

• 全局编译器宏只能在 script-setup 模式下使用；**
• script-setup 模式下，使用宏时无需 ‘import’可以直接使用；
• script-setup 模式一共提供了 4 个宏，包括：defineProps、defineEmits、defineExpose、withDefaults。

结论

通过使用 ‘defineExpose’ 宏方法，我们可以在 ‘Script-Setup’ 模式下实现父组件获取子组件数据的功能。这种方式使得组件之间的通信更加直接和灵活。然而，需要注意的是，过度使用父子组件之间的直接通信可能会导致组件的耦合性增加，因此在实际使用中应该根据具体情况进行权衡和选择。