如题
本人非前端开发,起因是用 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>
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.