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="lo...