vue2中调用子组件中的方法，可以直接 this.$refs.child 就可以获取到子组件，再继续 .a 就可以获取到child组件中的变量a。

到vue3中，这个方式有所改变：

  
    
Parent
    
  


import Child from './Child.vue'
const child = ref(null) // ref 是一个响应式的变量，它指向了 Child 组件的实例
child.value.doSomething() // 获取child中的方法
console.log(child.value.a)



  
    
Child
  


const a = ref(1)
function doSomething() {
  console.log('do something')
  a.value++
}
defineExpose({ // 重点:需要expose暴露出去对应的方法.变量同理
  a,
  doSomething
})

重点：child中的变量和方法，在使用setup语法糖时，必须使用defineExpose将需要的内容暴露出去。

官方文档：

使用  的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在  中声明的绑定。

可以通过 defineExpose 编译器宏来显式指定在  组件中要暴露出去的属性。