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

文章目录

• • vue3子组件需要把父组件要的ref数据开放
  • • [1. 先回忆 Vue2](#1. 先回忆 Vue2)
    • [2. Vue3 彻底改了](#2. Vue3 彻底改了)
    • [3. 所以才需要 defineExpose()](#3. 所以才需要 defineExpose())

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

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

1. 先回忆 Vue2

Vue2 不管是 data 、 methods 、 computed ......

只要你写在组件里，父组件通过 $refs 全都能拿到！

js
  
// Vue2
data() {
  return { money: 100 }
},
methods: {
  fn() {}
}

// 父组件直接用
this.$refs.children1.money = 200
this.$refs.children1.fn()
 

Vue2 的问题：

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

2. Vue3 彻底改了

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

3. 所以才需要 defineExpose()

它的作用就是：

我允许外面用的，我才暴露！

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

最终对比（最清晰）

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

Vue2 直接用实例就行，因为默认都暴露

Vue3 更封闭，默认不暴露，所以要 defineExpose

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