vue3的组件间通信ref子组件需要把父组件要的ref数据开放

vue3子组件需要把父组件要的ref数据开放

Vue3 比 Vue2 更“封闭、更安全”，默认不对外暴露任何东西！

1. 先回忆 Vue2

Vue2 不管是 data 、 methods 、 computed ……
只要你写在组件里，父组件通过 $refs 全都能拿到！

js// Vue2data(){return{money:100}},methods:{fn(){}}// 父组件直接用this.$refs.children1.money=200this.$refs.children1.fn()

Vue2 的问题：

• 不安全 → 父组件随便改子组件内部数据
• 不规范 → 子组件管不住自己的东西

2. Vue3 彻底改了

在<script setup>里： 内部变量、函数，默认全部是 私有 的！ js// 子组件letmoney=ref(9999)// 默认是私有的functionfn(){}// 默认也是私有的父组件就算拿到实例，也访问不到！ js children1.value.money// undefinedchildren1.value.fn()// 报错为什么要这么设计？-安全：子组件自己决定哪些能给外面用-规范：父不能乱改子内部-低耦合：组件更独立

3. 所以才需要 defineExpose()

它的作用就是：
我允许外面用的，我才暴露！

jsdefineExpose({money,// 只有这个，父组件才能访问})

最终对比（最清晰）

• Vue2：默认全公开 → 不安全
• Vue3 ：默认全封闭 → 安全
  → 想让外面用，必须 手动 defineExpose

Vue2 直接用实例就行，因为默认都暴露
Vue3 更封闭，默认不暴露，所以要 defineExpose

这就是 Vue3 比 Vue2 更严谨、更工程化 的地方。