当前位置: 首页 > news >正文

Vue3 - defineExpose的使用

在 Vue 3 的 <script setup> 语法中,defineExpose 是一个特殊的编译宏,用于显式暴露组件内部的属性或方法,让父组件可以通过 ref 引用 访问到子组件的这些成员。

为什么需要 defineExpose

<script setup> 中,组件的内部状态(如变量、方法)默认是 私有 的,父组件无法直接通过 ref 访问。这是为了封装组件内部实现,避免外部随意修改。

如果父组件需要访问子组件的某些属性或方法,就必须通过 defineExpose 主动暴露。

基本用法

1. 子组件中使用 defineExpose 暴露成员

vue

<!-- 子组件 Child.vue -->
<script setup>
import { ref } from 'vue'// 内部状态
const count = ref(0)
const name = ref('子组件')// 内部方法
const increment = () => {count.value++
}// 暴露给父组件的成员(对象形式)
defineExpose({count,    // 暴露响应式变量name,     // 暴露响应式变量increment // 暴露方法
})
</script><template><div>子组件:count = {{ count }}</div>
</template>
2. 父组件通过 ref 访问子组件暴露的成员

vue

<!-- 父组件 Parent.vue -->
<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'// 创建 ref 引用子组件
const childRef = ref(null)// 子组件挂载后才能访问(确保 ref 已指向子组件实例)
onMounted(() => {// 访问子组件暴露的属性console.log(childRef.value.name) // 输出:"子组件"console.log(childRef.value.count) // 输出:0// 调用子组件暴露的方法childRef.value.increment()console.log(childRef.value.count) // 输出:1
})
</script><template><Child ref="childRef" />
</template>

注意事项

  1. 访问时机

    父组件必须在子组件 挂载完成后 才能通过 ref 访问暴露的成员(可在 onMounted 钩子中操作,或在模板中用可选链 ?. 避免初始化报错)。

    vue

    <!-- 模板中安全访问 -->
    <div>子组件count:{{ childRef?.count }}</div>
    
  2. 响应式保持

    如果暴露的是 refreactive 类型的响应式数据,父组件访问时仍能保持响应式(子组件修改后,父组件会自动更新)。

  3. 仅用于 <script setup>

    defineExpose<script setup> 特有的语法,普通的 <script> 组件(非 setup 语法)不需要它,直接通过 this 暴露即可。

  4. 暴露的是 “引用”

    父组件拿到的是子组件内部成员的引用,修改暴露的响应式数据会直接影响子组件(需谨慎操作,避免破坏组件封装性)。

总结

defineExpose 的核心作用是 打破 <script setup> 的默认私有性,让父组件能安全访问子组件的指定成员,适用于需要父子组件紧密交互的场景(如父组件调用子组件方法、获取子组件状态等)。

http://www.dtcms.com/a/495007.html

相关文章:

  • Go Web 编程快速入门 01 - 环境准备与第一个 Web 应用
  • 图像处理之腐蚀算法-收缩去噪
  • 基于单片机的智能鱼塘饵料投喂系统设计
  • 串扰16-保护地线
  • LED氛围灯方案开发MCU控制芯片
  • 博客网站素材做网络推广一个月多少钱
  • txt怎么做网站wordpress the7 theme
  • 国产OCR模型荣登HF榜首——PaddleOCR-VL技术详解与多场景实测
  • seo网站排名优化快速排ppt背景模板免费下载
  • 保山市住房和城乡建设厅网站长春火车站人工电话
  • 网站开发内容和方法无锡市建设培训中心网站
  • 【Win32 多线程程序设计基础第七章笔记】
  • 大模型在网络安全领域的应用与评测
  • JavaEE--SpringIoC
  • macOS版Sublime简记
  • 机器学习(1)- 机器学习简介
  • 系统架构设计师备考第44天——软件架构演化方式的分类和原则
  • 郑州网站建设公司排行超级工程网站建设上海中心大厦
  • 睢县做网站酒店怎样做网站好评
  • Azure OpenAI 压测和配额规划完整指南
  • Lua C API 中的 lua_rawseti 与 lua_rawgeti 介绍
  • 基于单片机的便携式温湿度检测烘干机设计
  • lua对象池管理工具剖析
  • 网站建设选择什么系统好福建省建设工程执业注册管理中心网站
  • 桐庐建设局网站域名解析入口
  • 数据库flask访问
  • 每日Reddit AI信息汇总 10.17
  • 高可用、高性能、高扩展集群核心区别详解以及高可用介绍
  • 【Linux网络】初识网络,网络的基础概念
  • 手机端网站动效类怎么做seo搜索优化 指数