vue解决在自组件修改父组件传过来的值，父组件值也对应变化

最新推荐文章于 2024-05-07 10:08:18 发布
最新推荐文章于 2024-05-07 10:08:18 发布
阅读量343 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heros0806/article/details/131127015
版权

在开发过程中，写了一个弹窗组件作为该表格的子组件，目的是点击弹出展示该表格的详细信息，通过props传值点击的该行信息，犹豫后端返回的是0和1分别代表‘未完成’和‘已完成’，犹豫在父组件中是三目运算符判断 {{itemc.alarmStatus=='1'?'已处理':'未处理'}} ，子组件中对传过来的数据格式化时候父组件对应状态也进行变化。

经过研究，当父组件传值过来时，我在子组件里面通过JSON.parse(JSON.stringify(data))对数据进行拷贝，然后赋值给子组件中定义好的变量，然后对子组件中拷贝的值进行数据格式化，并且进行展示

拷贝父组件的值：

this.copyData = JSON.parse(JSON.stringify(this.targetDataPar))

然后直接对this.copyData进行操作就好了 

heros0806
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue slot 在子组件中显示父组件传递的模板
12-29
父组件使用没有指定slot属性，默认为default 在slot中可以使用默认值，如果父组件没有传递对应的slot，则会显示默认值 <!DOCTYPE html> <html> <head> <meta charset=utf-8> [removed][removed] </head> <body> <div id=app> <modal> <!-- 调用父组件的方法 --> <h1 click='click'>aaa</h1></modal> <modal>
父子组件传值，子组件数据不更新
qq_48850466的博客
05-08 4267
项目场景： 提示：这里简述项目相关背景： 例如： 查看列表中的某一条，显示这条的详情信息–后台管理系统 问题描述 提示：这里描述项目中遇到的问题： 在父子组件传参时，父组件将值传到子组件后，子组件进行数据展示，在第一次传参时可以正常显示，第二次传值子组件的值就不更新了。 父组件 <div :parenData ="datas"></div> <script> data(){ return{ datas:"1" } }, methods:{ ch
父子组件传值，父组件参数值变更，子组件参数值已跟着变更，但是视图不更新
ajieAAAAAA的博客
08-22 487
今天分享一个问题：我在更改别人项目的时候，发现一个父组件传值给一个子组件，我在父组件执行变更，但是子组件的视图并没有更新，然后我在子组件监听这个参数，发现子组件数据是有跟着变的，但是视图是没有变更的，那我就怀疑是key的问题了。在子组件传值的时候，加入一个key，如果data是一个字符串的话，可以直接用data赋值给key，如果data是对象，则可以使用一个动态的id。当没有加入key的时候，子组件并没有重新加载，所以不会再次处理props数据，视图也就没有更新。
子组件使用父组件传进来的值，子组件修改值感染父组件的值问题解决
小白的自我摸索之路
02-23 723
在开发中遇到了一个问题，将父组件的一个对象传给了子组件，在子组件操作该对象时，父组件的数据也受到了影响，这不是我所希望的例如下图，编辑未保存时，子组件编辑中修改值会将父组件中的值给修改掉。
vue解决子组件值改变父组件的值跟着变
weixin_63456913的博客
05-20 959
思路： 为了解决这一问题，当父组件传值给子组件以后，通过JSON.parse(JSON.stringify(data ))将父组件的数据进行拷贝，然后赋值给子组件中字段,子组件操作只是改变的子组件的值，而不会改变父组件的值，当点击‘’确定‘’按钮时，通过$emit调用父组件中的函数，将修改后的子组件值给了父组件，修改父组件中的值，当再次进入子组件的时候，会重新把修改后的父组件值拷贝给子组件进行展示，这样可以解决上述问题啦。
vue——解决父子组件传值，子组件改变值后父组件的值也会随之改变
weixin_44732078的博客
11-08 3091
解决父子组件传值，子组件改变值后父组件的值也会随之改变
VUE子组件更改父组件数据
三包酸奶！的博客
06-12 9786
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：this.$emit(‘update:title’, newTitle) 然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。
vue通过sync标识符 在子组件中更便捷的修改父组件的值
weixin_45966674的博客
05-16 436
App.vue套用了textData组件 然后 传给了 textData组件一个name变量 值为小猫猫 那么 我们这时要实现一个需求。大家可能都会想到 在父组件中定义一个函数 用接到的参数修改当前name 然后子组件取调用父组件的函数。sync 声明父组件传值 子组件通过this.$emit(‘update:变量名’, 最终值)要在src下的components中创建一个textData.vue组件。因为vue是不支持子组件直接这样去修改父组件的值的。根组件 App.vue参考代码如下。
在Vue中获取组件声明时的name属性方法
10-18
今天小编就为大家分享一篇在Vue中获取组件声明时的name属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 父组件调用子组件方法及事件
01-19
　父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部. 　父组件页面的上方同时有一个上传图片按钮上传图片后会显示在第一个模块: 　设想思路:点击父组件中的按钮触发子组件中上传方法: 　子...
使用VUE自定义组件封装数据字典实战
03-07
我们的目标是传入一个数据字典的类型编码，组件内部调用后端API，完成数据的加载与存储，在选择项变化时，自动更新绑定的对应的业务实体的属性值。同时，在业务实体的编辑页面，也能自动绑定和显示已选择的字典项。
详解vue引入子组件方法
12-08
前端框架vue，在利用脚手架工具vue-cli创建前端项目时候，怎么引入组件呢...4、第四步，返回home.vue组件，引用header.vue组件代码如下图 HomeHeader 对应上一步的命名； 首先引入界面 import HomeHeader from ‘./pag
Vue中子组件改变父组件的数据解决方法
bob的博客
07-13 906
1.项目中遇到的问题 在项目中，碰到父组件向子组件传一个对象数据，子组件修改props里接受父组件的数据， 父组件的数据也 发生变化的问题，具体的代码如下 Parent.vue <template> <div> <child :infor="infor" :inforLabel="inforLabel"></child> </div> </template> <script> im
解决子组件改变传递的值，父组件的值也会跟着改变的情况
zz18256889177的博客
05-22 4424
今天在没事重新翻阅 vue的开发文档的时候，发现一个很好玩的东西，很开心，也感觉有必要记录一下，也给大家分享一下，避免大家踩坑 文档说： 注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。 这句话咋一看好像是说vue的组件传值不在准守但想数据流这个规则，其实不是这样的，上面讲了，是引用数据类型，不在遵守这个规则。 为什么？ 这就要说说vue的组件传值对于引用数据类型来说，是一个 浅拷贝。
vue中子组件修改父组件中传入的数据
u010640592的博客
02-19 6891
vue中父子组件数据修改的问题 文章目录vue中父子组件数据修改的问题前言一、子组件能否直接修改父组件中传入的数据？如何才能解决父子组件之间数据的双向绑定呢？二、使用步骤1.引入库2.读入数据总结 前言 这篇文章主要针对vue2中的父子组件之间，数据的修改以及方法的调用而展开的内容 提示：以下是本篇文章正文内容，下面案例可供参考 一、子组件能否直接修改父组件中传入的数据？ 官方文档（单项数据流，你不应该在一个子组件内部改变 prop）给出的答案是否定的。 虽然官方建议不要在组件内部修改prop，但是在
Vue解决父子组件传值，子组件改变值后父组件的值也改变的问题
热门推荐
weixin_43254676的博客
06-10 1万+
Vue解决父子组件传值，子组件改变值后父组件的值也改变的问题
v-model实现父子组件数据同步
weixin_52053631的博客
06-23 323
【代码】v-model实现父子组件数据同步。
vue常用时间修饰符记录
最新发布
2201_75705263的博客
05-07 137
Vue常用时间修饰符
vue3 子组件修改父组件传来的值
09-26
在Vue3中，子组件修改父组件传来的值可以通过使用`$emit`方法来实现。在子组件中，通过`this.$emit('事件名称', 参数)`来触发一个自定义事件，然后在父组件中通过使用`@事件名称`来监听这个自定义事件，并在对应的方法中处理数据。 下面是一个示例代码： 子组件： ```html <template> <h1>{{ count }}</h1> <button @click="addCount">点击改变父组件的值</button> </template> <script> export default { props: { count: Number }, methods: { addCount() { this.$emit('changeCount', 1); } } } </script> ``` 父组件： ```html <template> <div id="app"> <Children :count="count" @changeCount="updateCount" /> </div> </template> <script> import Children from './components/Children.vue'; export default { components: { Children }, data() { return { count: 0 }; }, methods: { updateCount(value) { this.count += value; } } } </script> ``` 在上面的示例中，子组件通过点击按钮触发`addCount`方法，并将1作为参数传递给父组件的`changeCount`事件。父组件中定义了`updateCount`方法来接收这个参数，并更新父组件的`count`属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值