Vue关于子组件内表单元素与父组件之间的传值问题

最新推荐文章于 2024-08-02 09:29:40 发布
最新推荐文章于 2024-08-02 09:29:40 发布
阅读量4.1k 收藏 3
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/limy_cxm/article/details/79345517
版权

Vue的组件应该解耦,组件当中的作用域是完全独立存在的。
子组件中不能直接使用父组件的数据。应该使用props传递父组件到子组件的数据，子组件通过events给父组件发消息，以此实现父子组件间的通信。
而对于表单元素，子组件经过props的传值不能直接绑定到表单元素上，因为表单元素变化的同时，会影响改变父组件内部绑定数据的变化，这在Vue里面是不被允许的。会出现报错情况
对于表单组件内部的元素
不能直接用v-model去绑定的变量在props中进行传值
v-model绑定的变量是该组件内部的变量
父组件的传值也不直接绑定在表单元素的value属性上，而是独立开来（意思就是说，我只负责传值，至于内部你想怎么用和我无关，因为你内部数据必须独立，且不能影响外部）
其中运用到Vue的两个方法：watch和computed计算属性，先看下图我们可以了解到表单的props和data在表单元素上绑定的什么位置
这里写图片描述
这里写图片描述

从上图我们可以看出来，props中父组件的传值并没有绑定在子组件的表单元素任何一个属性上，以provinceId为例，
该图看出，他运用了computed属性将父组件传递过来的值绑定到了计算属性getProvince上。表单元素上value属性值绑定的也是一个计算属性proVal，改计算属性proVal的作用就是将计算属性getProvince的值赋予子组件内部变量province_id.而且还将父组件传递过来的值返回给proVAl,保证了子组件表单元素v-model绑定的变量的值和value属性绑定变量的值保持一致性，第一次的预先传值显示就出来了，第二个watch属性就是子组件像父组件传值

limy_cxm
关注
专栏目录
Vue表单类的父子组件数据传递示例
08-27
本篇文章主要介绍了Vue表单类的父子组件数据传递示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element-ui合并表格、表格内编辑、vue父组件向子组件传引用类型值问题解决
w13664606186的博客
11-29 1582
element-ui合并表格 需求：实现如下row合并的表格 后台获取到的数据结构是类似于 [{ “id”: “1”, “list”: [{ “name”: “249”, “number1”: “VI” },{ “name”: “249”, “number1”: “VI” }] },{ “id”: “3”, “list”: [{ “name”: “249”, “number1”: “VI” }]...
VUE父子之间的传值（以vue3为例）
最新发布
m0_60817005的博客
08-02 2706
【代码】VUE父子之间的传值（以vue3为例）
Vue 父子组件通信
cherry的前端学习历程
08-22 1513
** 页面描述： ** 一个页面上有3个表格，对这些表格的某些列实现搜索功能，具体的表格为子组件，搜索框为父组件。 用截图画了一下，大家凑合看蛤～ 貌似看完这个破图更懵了啊哈哈（笑哭.jpg） 别怕，来看一下router就清楚啦！ ** 实现过程： ** home组件含有3个子组件，分别为表格具体内容，其中，搜索框写在父组件中，即home模块内。 home.v...
vue组件 孙组件 调用爷组件（祖父组件）的方法
暂时还没想好博客简介
11-14 1万+
vue组件 孙组件 调用爷组件（祖父组件）的方法
子组件使用watch动态监听父组件数据并更新
HYeeee的博客
10-08 1万+
1、问题 父组件的数据变化，子组件也要跟着变化。 一般父向子传值，子组件通过props接收。比如： 父组件：传值popInfo <shop-setting :popInfo="popInfoParent" @popClick="popClick"></shop-setting> 子组件：接收 <script type="text/ecmascript-6"> ..
vue子组件改变父组件数据的两种方法
qq_40646986的博客
09-28 1862
今天再看github上别人的项目时发现一个vue的小细节，之前没有见过特写一篇文章记录一下……，小细节为方法二。 方法一 子组件代码 <template> <div @click="open"></div> </template> methods: { open() { this.$emit('showbox',tru...
Vue和React组件之间的传值方式详解
10-17
此外，还可以通过`v-model`实现双向数据绑定，它本质上是监听表单元素的`change`事件，通过事件来更新父组件的数据。 2. **兄弟组件通信**： - Vue中，通常通过父组件作为中介，让兄弟组件通过共享的父组件来传递...
vue 父组件通过v-model接收子组件的值的代码
10-16
通常，我们在父组件中使用`v-model`与表单元素直接进行数据绑定。但在组件化开发中，`v-model`也可以在父子组件间使用，以实现自定义组件的双向数据绑定。 在上述代码示例中，展示了如何在Vue父组件中通过`v-model`...
Vue 组件间传值及事件触发Demo
09-07
总结：Vue组件间传值和事件触发是构建可复用、可维护应用的基础。通过`props`、`v-model`、`$emit`、`Vuex`等手段，我们可以有效地管理组件间的数据流动，同时通过自定义事件和事件回调实现组件间的交互。理解并熟练...
VUE使用vuex解决模块间传值问题的方法
08-30
Vuex解决了模块间传值问题，实现了组件之间的数据共享。 知识点1:Vuex的基本概念 Vuex的核心概念包括state、actions、mutations、getters等。state是Vuex存储的状态，actions是触发状态变化的事件，mutations是...
Ant Design Vue中有关父子组件进行通信传值的问题
九七的博客
03-26 911
有关ant design vue中父子组件传值的问题
vue中的父子组件之间的数据传递之props、$ref和$emit
时清云的博客
01-08 9262
之前大部分时候都是在用angular开发项目，vue用的很少，不过现在也逐渐在用vue开发一些项目了，于是就想着把vue熟悉并总结一下。 vue的组件化思想，其中组件之间数据的传递很重要，我感觉很有必要把它总结一下。好了，开始正题： props是用于数据之间的传递（父组件向子组件），ref也可以用于数据之间的传递（ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过ref可能获取到...
在vue中实现父组件调用子组件以及传值
我的博客
01-06 1万+
vue的组件化思想：java中，我们常常将共用部分放入一个单独的类中，并称它们为工具类，这样不仅可以减少代码的冗余，并且在维护上也大大提高了效率。当然，在vue中也有类似的处理，就是组件（Component）；组件是vue最强大的功能之一，可用来封装重用的代码。 哪些场景适合 如订单有多种状态，使用标签页，每一页查询一种订单状态的数据，显示数据的表格却是一样的，这时就可以用到组件来封装共同...
如何界定Vue中父组件和子组件
每天学习一点点
01-03 6474
 如何界定Vue中父组件和子组件？ 通过实例说明： <div id="app"> <my-component :message="msg"></my-component> </div> <script> Vue.component('my-component',{ props:['messag
关于vue中.sync的在开发实践中的具体用法说明
一键写代码的博客
02-20 274
在组件开发中，父子之间，经常会遇到.sync修饰符 示例代码： parent.vue <template> <div> <p>parent vue</p> <p>{{ doc.title }}</p> <Child :title.sync="doc.title" /> </div> </template> <script> import Child f.
Vue插槽的使用和插槽的传值操作
热门推荐
jason_renyu的博客
12-20 1万+
最近有小伙伴询问Vue中插槽的使用，或者有些对插槽比较陌生的有比较想用的，这里我就针对Vue的插槽使用方式进行简单的讲解，其实对于插槽最全的还要属官方文档，但是有些小伙伴就是不爱看官方文档，那么就来看下我这边对插槽基础使用的叙述吧，希望对你有用！！！ 首先我们先了解插槽的分类，插槽分为默认插槽（这个叫法可能有不一样的，但是都是一个东西，我这比较习惯成为默认插槽）、具名插槽和作用域插槽。下边将对这几个插槽的基础用法进行简单实例，讲解谈不上就是基础的使用用法让你更加便捷的使用。 默认插槽 默认插槽顾名思义就是默
VUE父子组件传值（含实例）
Don't disturb me!的博客
09-10 5611
vue父子组件 1.父传给子（在子组件中改数据） 父组件： 1.在子组件上绑定数据arrData 2.在data()中给出定义（注意数据类型） 3.对需要传给子组件的数据进行相应操作 子组件： 1.在props中给出定义 2.watch监听数据变化 3.在watch定义的方法里对数据进行操作（与子组件自己的数据进行交互） 2.子传给父（不可以在传给父组件之后修改数据） 根据情况讨论，这里是因为子组件被父组件在一个界面多次调用，为了区分开组件，设置了一个spantitle作为唯一key，然后把spanti
Vue3中父子表单组件数据同步问题
Smell_rookie的博客
04-06 1966
vue大型表单组件数据如何优雅实现？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值