vue3 中如何获取子组件的属性值？

如题

起因

本人非前端开发，起因是用 Java 做了一个 api ，然后想学习前端使用 vue3 element-plus 然后再集成一个 markdown 编辑器发布文章

过程

看到一个不错的编辑器 https://github.com/imzbf/md-editor-v3 ，然后看它的文档有一个 modelValue 的属性值是正文的内容，开发时创建了一个 MdEditor.vue 的子组件，又创建了一个 PostAdd.vue 的父组件，父组件里面是个表单，有标题、作者之类的，下面就是编辑器，需求是点创建时把编辑器正文的 markdown 字符作为表单的 content 值通过 post 提交给 api 完成创建

然后就卡到 把编辑器正文的 markdown 字符作为表单的 content 值 这一步了，查了 vue3 的文档看到 $refs 可以从父组件获取到子组件的属性值，前端知识学的不是太好，代码写成下面这样会报错，卡到这里不知道咋实现了

求教各位 v 友该如何实现这个需求

代码

样式图

父组件的代码

<script lang="ts" setup>
import {reactive} from 'vue'
import axios from "axios";

import MdEditor from "./MdEditor.vue";
// do not use same name with ref
const form = reactive({
  title: '',
  createTime: '',
  updateTime: '',
  author: '',
  tag: '',
  postImage: '',
  content: '',
});


const onSubmit = () => {
  console.log('submit!');
  // axios.post('/posts', form)

  console.log(form);
  console.log(this.$refs.md_text.modelValue);

};
</script>