vue3 父获取子组件数据

在Vue3中，可以通过ref和$refs来获取子组件数据。

假设子组件的组件名为Child，那么在父组件中可以这样获取子组件数据：

1. 使用ref获取子组件实例

<template>
  <div>
    <Child ref="child"></Child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  mounted() {
    console.log(this.$refs.child.data)
  }
}
</script>

可以看到，在父组件中使用了ref="child"来获取子组件实例，并在mounted钩子函数中通过this.$refs.child来访问子组件的data属性。

2. 使用$refs获取子组件实例

<template>
  <div>
    <Child></Child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  mounted() {
    console.log(this.$refs.child.data)
  }
}
</script>

与方法1不同的是，这里没有使用ref来获取子组件实例，而是直接使用了子组件的组件名Child作为$refs对象的属性名来获取子组件实例。同样，在mounted钩子函数中通过this.$refs.child来访问子组件的data属性。

需要注意的是，$refs只会在子组件渲染完成后才会被填充，所以在父组件中访问$refs时需要判断子组件是否已经渲染完成。