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

2022-01-30 13:59:01 +08:00
 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>
2051 次点击
所在节点    程序员
6 条回复
liangtao927190
2022-01-30 14:04:33 +08:00
vue3 里用 ref 不是这样用的了,差不多是这样
const editorRef = ref(null);
然后在组件上
<md-editor ref="editorRef"></md-editor>

需要用的地方就直接

editorRef.value.xxxx
anxn
2022-01-30 14:15:19 +08:00
@liangtao927190
感谢兄弟! 照这个用法调试出来了
liangtao927190
2022-01-30 14:35:49 +08:00
@anxn 不客气,上面有点错误,vue3 的 setup 里是这样用的,如果还是 vue2 的写法确实是你那样的。
awen233333
2022-01-30 16:54:15 +08:00
我昨天也遇到这个问题,跟你用一样的技术,找了好久
xiadd
2022-01-30 17:55:36 +08:00
defineExpose
ychost
2022-02-01 17:32:45 +08:00
v-model:xx ,然后子组件用 emit('update:xx')

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/831408

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX