Vue 中父组件如何获取子组件中form的值

从入门到放弃-咖啡豆

已于 2025-07-19 10:39:58 修改

阅读量6.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue

于 2020-04-01 19:13:17 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41625929/article/details/105252975

Vue 专栏收录该内容

4 篇文章

订阅专栏

一：场景介绍

笔者在一个商城项目中有这样一个场景，商品管理维护vue组件中，使用了一个富文本编辑器用于编辑商品详情，由于此编辑器多处使用到，故而将此抽离存放在一个单独的vue组件中，需要使用该编辑器的界面，可以使用import来引入该vue组件，做为子组件。

但在实际使用过程当中，却发现取值或者是赋值遇到了困难，故记录下此解决方法，方便他人也便于自己以后查找。

二：具体代码

详细的代码我就不贴上来了，主要还是在Product.vue中引入MEdit.vue

Product.vue代码

<template>

<MEdit></MEdit>
。。。。。。

</template>
<script>
  import addForm from '@/view/MEdit.vue'
  export default {
      components: {Product},
      ......
   }
</script>

MEdit.vue代码很简单，就是一个简单的富文本编辑器的使用

三：取值方法

在获取到该方法之前，采用了至少两种方法，包括定义v-model来取值，都以失败告终。

Product.vue

<template>

<MEdit ref="medit"></MEdit>
。。。。。。

</template>
<script>
  import addForm from '@/view/MEdit.vue'
  export default {
      components: {Product},
      ......
   }
</script>

注意这里的ref方法增加一个ref，父组件能通过$refs直接拿到子组件实例。

this.$refs.medit.form

使用上面的方法即可以取到你要的组件中的对象值。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

.NET C# JAVA 基础交流群 1095936339 欢迎入群交流