VUE3 defineExpose

### Vue3 中 `defineExpose` 的用法及其目的 在 Vue 3 Composition API 中引入了 `<script setup>` 语法糖，它简化了许多开发流程并提升了开发者体验。然而，在某些场景下，父组件可能需要访问子组件内部的状态或方法。为了实现这一需求，Vue 提供了一个名为 `defineExpose` 的宏工具。 #### 宏定义 `defineExpose` `defineExpose` 是用于显式声明哪些属性或方法可以从当前组件暴露给其父组件的一个工具[^1]。通过这种方式，可以控制哪些部分能够被外部访问，从而增强封装性和安全性。 以下是关于如何使用以及为什么要在脚本设置模式中使用它的具体说明： #### 使用示例 下面是一个简单的例子来展示 `defineExpose` 如何工作: ```vue <template> <button @click="increment">Increment</button> </template> <script setup> import { ref } from 'vue' const count = ref(0) function increment() { count.value++ } // 显式地向外界暴露特定的内容 defineExpose({ count, increment }) </script> ``` 在这个例子中, 子组件中的 `count` 和 `increment()` 方法都被明确地标记为可对外部可见的部分。这意味着如果这个组件作为另一个更大应用的一部分存在的话，则可以通过模板引用的方式获取到这些公开的数据和行为。 #### 父级调用方式 假设我们有一个包含上述自定义按钮逻辑的小部件 (即上面创建的那个)，那么可以在父级这样操作它们： ```vue <template> <child-component ref="myChildComponent"></child-component> <p>Count is {{ myChildComponent?.count }}</p> <button @click="handleClick">Call Increment From Parent</button> </template> <script setup> import ChildComponent from './path/to/ChildComponent.vue' import { onMounted } from 'vue' onMounted(() => { console.log('Exposed properties:', this.$refs.myChildComponent) }) function handleClick() { const childCompInstance = $refs.myChildComponent; if(childCompInstance && typeof childCompInstance.increment === 'function') { childCompInstance.increment(); } } </script> ``` 这里展示了当页面加载完成后会打印出由子组件所暴露出的对象；另外还提供了一种机制允许点击事件触发来自子组件的功能函数。 #### 设计意图 采用这种做法的主要原因是遵循最小权限原则——只让必要的东西变得可用而不是全部开放出去。这有助于保持良好的软件工程实践，减少不必要的耦合度，并使维护更加容易管理。 --- ###