Vue3.0 + ts 父组件如何获取(调用)子组件的数据(方法)
父组件调用子组件的方法,只需在父组件中操作
- 在父组件中引用的子组件添加ref属性,如下
<template>
<div>
<a-button @click="submit">提交</a-button>
<Jelly ref="flow" />
</div>
</template>
- 引入ref from vue
import { defineComponent, reactive, toRefs, ref, onMounted } from "vue";
- 获取定义的子组件,如写 ‘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 一样:它们是响应式的,可以传递到 (或从中返回) 复合函数中。