vue子组件 修改数据、父组件更新

于 2024-05-14 14:18:22 发布
阅读量305 收藏
点赞数 8
分类专栏： js vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84868241/article/details/138853502
版权
js 同时被 2 个专栏收录
12 篇文章 0 订阅
订阅专栏
vue
11 篇文章 0 订阅
订阅专栏

1、子组件

       reportsModule.editReport(params).then(() => {
            this.dialogVisible = false;
            this.$message.success("修改成功!");
             this.$emit("refresh");
          });

2、父组件引入页面

    <add-report :dataFrom="dataFrom" ref="addReport" :add="add" @refresh="refresh"></add-report>

父组件引入js

    refresh() {
      this.getConten()
    },

2401_84868241
关注
  • 8
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE 子组件向父组件传值（含传多值以及添加额外参数场景）
weixin_43242112的博客
08-31 1万+
一、子组件向父组件传递一个值 子组件： this.$emit('change', this.value); 父组件： <!-- 在父组件中使用子组件 --> <editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange($event)" /> // 事件处理函数 async costPlannedAmountChange(value) { console.log(value
vue子组件的数据处理后竟然影响了父组件的数据，导致父级的数据也同步变更了的问题解决
商务合作 / 项目定制开发 / 前端一对一培训、答疑
09-20 668
如果你在web前端开发、面试、前端学习路线有困难可以加我V：imqdcnn。免费答疑，行业深潜多年的技术牛人帮你解决bug。另外的问题是，为何在子组件处理的数据会影响到父组件的数据呢？有知道的同学可在下方留言。只是影响到了第一层，第二层的数据还是原始数据的引用。，即使我深度复制父级数据再处理后，还是有此问题。最终，我通过map解决了问题。这种方式是直接改变了原数组的，我猜测原因可能是上面的。
Vue中子组件修改父组件数据的方法及注意事项
alive_new的博客
09-23 3013
在Vue中，子组件默认情况下不能直接改变父组件的数据，以确保数据流动的单向性和应用的可维护性。然而，Vue提供了事件和.sync修饰符等方法，使得子组件能够向父组件传递数据并修改父组件的数据。
vue解决子组件值改变父组件的值跟着变
weixin_63456913的博客
05-20 1176
思路： 为了解决这一问题，当父组件传值给子组件以后，通过JSON.parse(JSON.stringify(data ))将父组件的数据进行拷贝，然后赋值给子组件中字段,子组件操作只是改变的子组件的值，而不会改变父组件的值，当点击‘’确定‘’按钮时，通过$emit调用父组件中的函数，将修改后的子组件值给了父组件，修改父组件中的值，当再次进入子组件的时候，会重新把修改后的父组件值拷贝给子组件进行展示，这样可以解决上述问题啦。
vue 父刷新子_vuejs从子组件更新父数据
weixin_39594457的博客
01-14 313
小编典典Vue2.0中不赞成使用双向绑定，而是使用事件驱动的体系结构。通常，孩子不应该改变其道具。而是应该$emit发生事件，并让父级对这些事件做出响应。在您的特定情况下，可以将自定义组件与一起使用v-model。这是一种特殊的语法，允许进行接近双向的绑定，但实际上是上述事件驱动架构的简写形式。这是一个简单的示例：Vue.component('child', {template: '#child'...
react子组件调用父组件方法，数据没有实时更新
weixin_69903461的博客
09-26 424
解决方法:不向子组件直接传递字段，而是向子组件传一个函数，return出这个字段，在子组件中使用的地方调用这个函数，让它去请求最新的字段值。原因:数据在初始加载中拿到了初始值，虽然你更新了父组件的值，但是，本组件并没有卸载，也就是说没有重新加载的过程，就没有拿到最新的值。
vue中子组件更新父组件
Mr古技术分享
07-22 1297
一、关于vue中watch的认识 我们要监听一个属性的的变化就使用watch一般是父组件传递给子组件的时候 •1、常见的使用场景 … watch:{ value(val) { console.log(val); this.visible = val; } } … •2、如果要一开始就执行 watch: { firstName: { handler(newName, oldName) { this.fullName = newName + '-' + this.lastName;
vue中子组件间接修改父组件传递过来的值
weixin_44303631的博客
06-08 364
子组件修改父组件传入的值
Vue中值的传递（父传子，子传父，子父同步）
a_xia_o的博客
07-19 2320
②子组件中，通过props接收父组件传递过来的数据。属性绑定的形式，把数据传递给子组件。触发自定义事件，更新父组件中的数据。①在v-bind：指令之前添加。
Vue组件间数据同步刷新解决方案--全局事件总线
Ajucy的博客
04-17 3623
vue，跨组件间数据同步问题解决方案
VUE子组件更改父组件数据
热门推荐
三包酸奶！的博客
06-12 1万+
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：this.$emit(‘update:title’, newTitle) 然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。
vue父子组件传值，父组件内容更新子组件内容不实时更新
G佳伟
09-05 1万+
vue父子组件传值不能实时更新问题，父组件将值传给了子组件，但子组件显示的值还是原来的初始值，并没有实时更新
vue更新组件方法
Yaince的博客
05-20 1475
v-show：元素初始化时就会被渲染 但通过后面的条件控制显隐 即display：none 与display：bolck的效果 ，适合频繁切换使用。4、reload、this.$router.go(0) （不推荐）v-if:通过判断条件来销毁重建一个元素 ，适合条件不怎么变化。3、key （组件更新需要通过哪个值就将key设为哪个值）1、强制刷新 （数据量大的时候 性能不好）2、v-if 重置组件。
VUE实现在子组件中修改父组件的数据
weixin_53540511的博客
09-30 6553
在VUE的开发中，最大的特点就是可以调用各种组件，调用组件者我们称之为父组件，被调用的组件我们称之为子组件。由此，我们一定会遇到父子组件中互相调用数据和修改数据，本节重点讲一下在子组件中如何修改父组件的数据，亲测可用。
vue2 解决父组件刷新子组件数据
qq_37309987的博客
06-16 5728
在使用elementui开发pc端项目时，经常会有这样的业务场景，比如，在页面中有一个按钮，点击按钮打开一个弹框，弹框里面有一些表单项或其他的数据源，如果把按钮所在的页面作为父组件，弹框中的内容作为子组件，父组件点击按钮想要每次都能初始化子组件中的数据，会发现mounted生命周期只会调用一次，如果想要每次打开都能刷新子组件的数据，一般会有以下几种解决方式。方法3、在父组件中调用子组件中的定义的页面初始化方法，可以解决问题，存在的小问题，父子组件耦合太高。子组件页面有两种写法，子组件页面方法一。
vue中组件动态传值，实现数据实时更新
qq_33404590的博客
01-18 6127
vue组件动态传值，实时更新
vue 父组件数据更新后子组件不变_vue知识汇总-2
weixin_39651488的博客
11-21 5991
一、对于MVVM的理解？MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View 代表UI 组件，它负责将数据模型转化成UI 展现出来。ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。在MVVM架构下，View ...
【VUE】父组件点击后子组件页面内容不更新 :key=“timer“
SZnAl的博客
05-30 4118
父组件点击后，子组件页面内容不更新（参数已经传递，子组件并没有对新参数进行调用） 解决方法： 在父组件中： 需要更新的子组件中添加： <business-form-dialog-template @submit="receiveOrder"> <order-apply-form :key="timer"/> //添加key </business-form-dialog-template> 父组件的点击方法中添加： han
vue 子组件修改数据 父组件更新
最新发布
09-29
在Vue中，子组件修改父组件的数据可以通过使用`$emit`方法触发父组件监听的事件来实现。具体的步骤如下： 1. 在子组件中，通过`this.$emit('eventName', data)`来触发父组件监听的事件，其中`eventName`是自定义的事件名称，`data`是要传递给父组件的数据。 2. 在父组件中，使用`v-on`或简写`@`来监听子组件触发的事件，例如`@eventName="handleEvent"`，`handleEvent`是父组件中定义的一个方法。 3. 在父组件的方法中，通过参数接收子组件传递的数据，然后更新父组件的数据。 通过以上步骤，子组件就可以修改父组件的数据并实现父组件的更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值