Vue2：兄弟组件间共享form表单数据

原创 于 2025-05-26 16:13:31 发布 · 329 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

文章目录

一、情景说明

父组件，有两个子组件。
子组件A和子组件B

在A组件中，有个form表单。
在B组件中有个按钮，触发后端接口保存数据。

这个时候，要在B组件中，获取到A组件中的form表单数据。
提交到后端进行保存。

那么，B组件如何获取A组件中的form表单数据了？

二、效果实现

1、父组件
在这里插入图片描述
2、子组件A
在这里插入图片描述
3、子组件B
在这里插入图片描述
在子组件中，直接用this即可获取。

补充：
参考：使用Provide/Inject实现跨组件数据共享

在Vue2.0中集成Vform动态表单
io_123io_123的博客
08-09 5688
最近由于业务需要，要做一个导出类似Word登记表的功能，所以考虑使用Variant Form动态表单来做前端表单的搭建、表单交互以及数据收集等功能。Variant Form实际上是一个低代码表单，支持Element UI组件库，能够大大提高我们的开发效率以及用户体验，这也是我们选择这一组件的目的。我们这次的功能涉及：Variant Form表单的引入、使用以及导出Word文档，我将全程记录使用过程中遇到的问题以及难点。
Vue3中父子表单组件数据同步问题
Smell_rookie的博客
04-06 2402
vue大型表单组件数据如何优雅实现？
vue中用Element-ui封装表单(form)组件动态渲染数据展示
weixin_53541596的博客
07-05 756
在searchForm中配置一组组对象，对象中包含要生成的控件类型并且添加一个属性，该属性的名字和在父组件的data定义的名字同名，因为要保证收集到的数据是响应式的，然后将该对象通过props传递给searchForm组件，之后会对searchForm进行遍历，每遍历一次就会根据当前对象生成一个表单控件。
实现一个vue2的Form表单插件
我的博客简介
07-29 974
代码】实现一个vue2的表单插件。
Vue 中父组件如何获取子组件中form的值
从入门到放弃
04-01 6421
摘要：在Vue商城项目中，将富文本编辑器封装为独立组件MEdit.vue供多页面调用时，遇到子组件数据获取难题。通过给组件添加ref属性（如<MEdit ref="medit">），父组件Product.vue可使用this.$refs.medit.form直接访问子组件实例数据，解决了通过v-model取值失败的问题。这种方法实现了父子组件间的简洁数据交互，为类似场景提供了有效解决方案。 （注：已过滤原文中的群号等无关信息，严格控制在150字内）
Vue2之封装Form表单组件
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
07-12 1210
Vue2之封装Form表单组件
基于Vue+Iview的ng-form-iview动态表单设计源码
09-28
在本项目中，总计包含了68个文件，这些文件细分为不同的类别，包括32个Vue组件文件、13个JavaScript文件、5个JSON配置文件、3个CSS样式文件、3个HTML模板文件、3个GIF动画文件、2个Markdown文档、2个ICO图标文件、2...
vue表单：使用Vue.js的表单
02-22
在大型项目中，表单数据可能需要跨组件共享。这时，可以使用Vuex作为全局状态管理库。首先安装Vuex，然后创建一个store，存储表单数据和验证状态： ```javascript // store.js import Vue from 'vue'; import Vuex ...
JSON生成Form表单的方法示例
12-07
总结起来，JSON生成Form表单是现代Web开发中提高效率和代码质量的有效工具，它通过JSON数据结构简化了表单的创建和维护，提供了丰富的功能，并且能够解决传统方式下表单开发所面临的诸多问题。了解并熟练运用这种...
vue仿word表单录入demo
03-28
`static`目录通常用于存放静态资源，如图片、字体文件或者不在Vue组件中的JavaScript和CSS文件。在本Demo中，可能会有用于模拟Word样式的CSS文件或图标资源。 `config`文件夹可能包含了项目配置信息，如开发环境和...
vue-form-2：Vue.js 2表单组件
01-31
注意：Vue.js版本1的用户请改用。 重大更改：从1.0版开始，此程序包使用受控组件，这意味着该值不再持久保存在字段组件上，而是持久保存在父使用者组件上。 这使得所有字段的行为都类似于正常的vue输入，使用v-model （而不是value ）来维护双向视图模型绑定。 如果您使用的是旧软件包，则需要安装版本0.4.0（也在Github中标记），尽管强烈建议您过渡到新版本。 这个vue.js套件为HTML表单管理提供了一个全面的解决方案，包括演示，验证和（可选）AJAX提交。 该演示基于。
vue2.0 组件之间的数据共享
最新发布
qq_45585640的博客
05-19 723
组件之间的数据共享
极简系列---vue2.x表单组件form
勤学daydayup的博客
07-26 925
文章目录my-form框架my-form-item框架my-form-item组件校验my-form组件校验broadcast事件广播my-input组件dispatch事件派发毛坯房验收 本文从零开始实现一个自定义的vue2.x表单组件my-form，组件使用体验类似element-ui 实现过程涉及到的知识点 自定义事件 事件的广播与派发 v-mode语法糖原理 $attrs，参考https://cn.vuejs.org/v2/api/#vm-attrs provide/inject传递数据，参考
vue2+element-ui二次封装表单
m0_70762806的博客
05-15 1562
后面两个组件如果不需要可以删掉，大体的效果没有影响 <package-form :form-data="formData" :form-config="formConfig" @submitForm="handleSubmit" @resetForm="handleReset" /> 属性名 类型 默认值 说明 form-data
vue.js 细节
zhzwei的博客
12-09 347
ref 预期：string ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例： <!-- `vm.$refs.p` will be the DOM node --> <p ref="p">hello</p> <!-- `vm.$refs.child` will be the child component instance
在 Vue 项目中，使用 Element UI 的 el-form 组件时，获取表单的值通常涉及以下几个步骤
weixin_44303625的博客
11-01 1435
在使用el-form时，获取表单的值主要通过绑定v-model和使用ref。同时，进行表单验证是一个重要的步骤，以确保用户输入的数据是有效的。希望这个详细的讲解对你有帮助！如果有任何具体的问题或者需要进一步的示例，欢迎提问！
Vue2+ElementUI表单、Form组件的封装
qq_43657722的博客
03-12 2848
在 Vue2 项目中，ElementUI 的 `el-form` 组件是常用的表单组件。它提供了丰富的功能和样式，可以满足各种需求。但是，在实际开发中，我们经常会遇到一些重复性的需求
Vue2二次封装el-form通过配置项生成表单
weixin_53580853的博客
09-15 1693
在实现表单功能的时候，我们经常会选择使用el-form，但是如果表单项比较多，使用和修改起来都会比较繁琐，那可不可以通过配置项来生成表单呢，说干就干。通过二次封装el-form实现下面的需求。
Vue2 父子组件数据传递与调用：从 ref 到 $emit
二哈喇子！
04-04 759
父传递数据给子组件，父调用子组件方法，子组件传递数据给父
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值