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

[anxn]

如题

起因

本人非前端开发，起因是用 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>

[liangtao927190]

vue3 里用 ref 不是这样用的了，差不多是这样
const editorRef = ref(null);
然后在组件上
<md-editor ref="editorRef"></md-editor>

需要用的地方就直接

editorRef.value.xxxx

[anxn]

@liangtao927190
感谢兄弟！ 照这个用法调试出来了

[liangtao927190]

@anxn 不客气，上面有点错误，vue3 的 setup 里是这样用的，如果还是 vue2 的写法确实是你那样的。

[awen233333]

我昨天也遇到这个问题，跟你用一样的技术，找了好久

[xiadd]

defineExpose

[ychost]

v-model:xx ，然后子组件用 emit('update:xx')