【Vue】Setup 函数的使用

### 使用 `defineExpose` 暴露组件属性或方法 在 Vue 3 的 `<script setup>` 模式中，`defineExpose` 是一个非常有用的工具，允许开发者有选择地向父组件暴露特定的属性和方法。这不仅提高了代码的安全性和可控性，还使得父子组件之间的交互更加清晰。 #### 基本概念 `defineExpose` 主要用于控制哪些内部状态或逻辑可以被外部访问。通过这个宏函数，可以在不破坏封装性的前提下实现必要的数据共享[^1]。 #### 实际应用案例 下面是一个具体的例子，展示了如何利用 `defineExpose` 来让父级能够调用子组件的方法： ```html <!-- 子组件 Child.vue --> <template> <div>{{ count }}</div> </template> <script setup> import { ref } from 'vue'; const count = ref(0); // 定义可被外界访问的内容 defineExpose({ incrementCount() { count.value++; }, }); </script> ``` 在这个例子中，`incrementCount()` 方法被设置为对外可见，因此父组件可以直接调用来改变计数值[^2]。 对于希望获取并操作该方法的父组件来说，则只需像这样编写模板部分即可完成绑定： ```html <!-- 父组件 Parent.vue --> <template> <!-- ...其他HTML结构... --> <Child ref="childRef"></Child> <button @click="callIncrement">点击增加</button> </template> <script setup> import { ref } from 'vue'; import Child from './components/Child.vue'; const childRef = ref(null); function callIncrement(){ if (childRef.value && typeof childRef.value.incrementCount === "function") { childRef.value.incrementCount(); } } </script> ``` 这里的关键在于使用了 `ref` 属性关联到子组件实例上，并通过 JavaScript 访问其公开接口来进行互动[^4]。