文章目录vue3子组件需要把父组件要的ref数据开放1. 先回忆 Vue22. Vue3 彻底改了3. 所以才需要 defineExpose()vue3子组件需要把父组件要的ref数据开放Vue3 比 Vue2 更“封闭、更安全”默认不对外暴露任何东西1. 先回忆 Vue2Vue2 不管是 data 、 methods 、 computed ……只要你写在组件里父组件通过 $refs 全都能拿到js// Vue2data(){return{money:100}},methods:{fn(){}}// 父组件直接用this.$refs.children1.money200this.$refs.children1.fn()Vue2 的问题不安全 → 父组件随便改子组件内部数据不规范 → 子组件管不住自己的东西2. Vue3 彻底改了在script setup里 内部变量、函数默认全部是 私有 的 js// 子组件letmoneyref(9999)// 默认是私有的functionfn(){}// 默认也是私有的父组件就算拿到实例也访问不到 js children1.value.money// undefinedchildren1.value.fn()// 报错为什么要这么设计-安全子组件自己决定哪些能给外面用-规范父不能乱改子内部-低耦合组件更独立3. 所以才需要 defineExpose()它的作用就是我允许外面用的我才暴露jsdefineExpose({money,// 只有这个父组件才能访问})最终对比最清晰Vue2默认全公开 → 不安全Vue3 默认全封闭 → 安全→ 想让外面用必须 手动 defineExposeVue2 直接用实例就行因为默认都暴露Vue3 更封闭默认不暴露所以要 defineExpose这就是 Vue3 比 Vue2 更严谨、更工程化 的地方。