Vue3.0 + ts 父组件如何获取（调用）子组件的数据（方法）

Vue3.0 + ts 父组件如何获取（调用）子组件的数据（方法）

父组件调用子组件的方法，只需在父组件中操作

1. 在父组件中引用的子组件添加ref属性，如下

<template>
  <div>
    <a-button @click="submit">提交</a-button>
    <Jelly ref="flow" />
  </div>
</template>

2. 引入ref from vue

import { defineComponent, reactive, toRefs, ref, onMounted } from "vue";

3. 获取定义的子组件，如写 ‘flow’，然后别忘记return出去，最后直接.value加子组件方法（或数据名）

setup(props) {
    const flow = ref(null);
    const data = reactive({
      submit() {
        console.log(flow.value.getData());
      },
    });
    return { ...toRefs(data), flow };
  },

！！！注意点 1. 我们在渲染上下文中暴露 flow ，2. ref创建的响应式需要使用.value语法

官方解释：

这里我们在渲染上下文中暴露 flow，并通过 ref=“flow”，将其绑定到 div 作为其 ref。在虚拟 DOM 补丁算法中，如果 VNode 的 ref 键对应于渲染上下文中的 ref，则 VNode 的相应元素或组件实例将被分配给该 ref 的值。这是在虚拟 DOM 挂载/打补丁过程中执行的，因此模板引用只会在初始渲染之后获得赋值。
作为模板使用的 ref 的行为与任何其他 ref 一样：它们是响应式的，可以传递到 (或从中返回) 复合函数中。