vue3中如何获取子组件的数据或调用其方法

vue3中如何获取子组件的数据或调用其方法

根据vue2的经验我们知道，父组件直接调用子组件的属性或方法需要通过this.$refs.XXX来实现，vue3同样是通过ref属性来获取子组件的属性或方法，只不过写法不同，官方文档的写法如下：

父组件

<script setup>
import { ref, onMounted } from 'vue'

// 声明一个 ref 来存放该元素的引用
// 必须和模板 ref 同名
const input = ref(null)

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="input" />
</template>

注意

1.如果不使用 < script setup>，需确保从 setup() 返回 ref
2.只可以在组件挂载后才能访问 ref

只要我们细心观察就会发现，文档的示例使用的都是setup(),而不是< script setup>

在日常使用中可能我们并不会感知到有什么区别，
但是在这里直接使用< sctipt setup>的方式，父组件是获取不到子组件的属性和方法的，这是为什么呢？
在官方文档的 组件上的 ref部分对此有详细的解释

所以在子组件中我们需要使用defineExpose方法，将需要被调用的属性或者方法暴露出去，这样父组件就能正常访问到了，如下是官方文档的示例：

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>