记录一个vue子组件data串掉的bug，组件间data串在一起。

最新推荐文章于 2023-12-21 09:15:32 发布
最新推荐文章于 2023-12-21 09:15:32 发布
阅读量320 收藏
点赞数
分类专栏： Vue iview 文章标签： vue iview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35189120/article/details/107942589
版权
Vue 同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
iview
1 篇文章 0 订阅
订阅专栏

首先动态加载所有子组件在这里插入图片描述
子组件代码自己定义哈，。我这个bill每个都不一样的是一个数组上面是for循环，每个值都不一样。
然后我在组件操作的时候发现所有的bill都一样了，最终找到罪魁祸首

在这里插入图片描述
注释的就是罪魁祸首 就是iview的组件
后面改成html的元素就正常了。
其实组件值串在一起还有可能是因为引用了同一个数组或者对象，但是我这么不是我确定我的bill是独立的，

危险游戏i
关注
专栏目录
vue中子组件和子组件之间怎么通信_Vue组件间通信6种方式
weixin_39979159的博客
12-22 2644
摘要： 总有一款合适的通信方式。Fundebug经授权转载，版权归原作者所有。前言组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系(可能隔多代)。针对不同的使用场景，如何选择行之有效的通信方式...
Vue—父子组件间的传值
01-20
父子组件间传值 父→子： 父组件绑定数据，子组件接收数据 ...简述：父子组件传值，子组件只可以接收来自父组件的数据而不能修改父组件的数据，否则其他子组件引用相同父组件数据时会产生BUG。 Q ： 子组
vue组件数据传递
soputasmile的笔记
10-30 118
1、父传子 参考官网 （1）使用props传递 （2）prop说明(参考props )，类型：：①数组，数组里面是变量名字符串 ②对象，对象的key是变量名，value是变量的约束条件 （3）prop名字如果是驼峰写法，在html中需要用分隔符 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head
Vue子组件被同一个页面多次调用而引发的性能问题
LuckyWinty的博客
12-21 1603
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群最近做的Vue2项目中，都涉及到一种场景，那就是一个组件（下称子组件）被同一个页面（下称父组件）多次调用。本来以为这个场景没啥，但是在实际做的过程，发现还是有必要注意一下的。需要注意的点在于：子组件在其生命周期中是否进行了接口请求，如果进行了接口请求，那子组件被父组件调用了几次，那这个接口就会被请求了几次。如果子组件每次被调用时请求的是不同...
Vue父子组件的数据传递
weixin_30825199的博客
11-20 68
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父子组件传值</title> <script src="./vue.js"></script> </head> ...
Vue3ts动态组件
qq_61398960的博客
09-09 830
引入组件的时候如果通过reactive包裹了这个组件，那么vue会给你报错，因为把组件渲染成一个响应式对象是没有意义的，浪费性能，所以我们可以通过showRef或者markRaw来把它包裹一下。特别注意：vue3中如果需要使用动态组件的话，:is = “这里必须是组件实例，不能是字符串”
vue-data-loading-无限滚动和向下/向上加载数据的另一个组件。-Vue.js开发
05-27
vue-data-loading中文文档无限滚动和下拉/上拉以加载数据的另一个组件。 这是一个演示：HackNews安装npm install vue-data-loadi vue-data-loading中文文档另一个用于无限滚动和下拉/上载以加载数据的组件。 这是一...
vue 需求 data中的数据之间的调用操作
10-14
在Vue.js开发中，data函数返回的对象用于存储组件的状态（state）。这些状态可以是字符串、数字、数组等基本类型，也可以是对象或其他组件的状态。但是在Vue组件的data函数返回的对象内部，你不能直接通过this来访问...
Vue封装一个简单轻量的上传文件组件的示例
08-27
在父组件中，我们使用了一个 my-upload 组件，它具有多个属性和事件监听，例如：file-list、action、data、on-change、on-progress、on-success、on-failed 等。这些属性和事件监听使得我们可以灵活地控制上传过程。...
解决vue-cli脚手架打包后vendor文件过大的问题
10-17
今天小编就为大家分享一篇解决vue-cli脚手架打包后vendor文件过大的问题。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中同一个页面多次复用同一个组件的相互干扰问题
热门推荐
weixin_47097870的博客
02-23 1万+
vue中同一个页面多次复用同一个组件的相互干扰问题
vue3通过v-for循环多次子组件，改变组件的个数，组件相互干扰
Xiao022353的博客
04-27 1490
我们一般v-for组件完后都是使用index来作为key的 但是，当我删除第一个组件的时候key为0，数组的第二个组件的key也会变成0，所以，因为key的赋值，导致数组的删除出现了data的值的混淆,我们只需要把 key 的值换一个item.XX就好了 不要用index 就行。
【通俗易懂】vue同一个页面复用同一个组件多次，如何让组件的内容显示不一样
CLN1991的博客
08-25 5957
比如有现在有一个yanggb组件，我引入到我的页面中(创建了一个组件实例)，然后调用两次(在页面上调用组件实例两次)，那么当我给第一个调用绑定的对象变量的一个属性赋值了100，那么第二个调用绑定的同一个对象变量的该属性也会被赋值100，因为这两个调用在同一个作用域内绑定了同一个对象变量，而JavaScript内一切对象皆为引用，也就导致第二个调用的值跟着第二个调用的值变化了。而组件化的一个重要特性就是作用域隔离，即一个组件实例拥有一个私有的作用域，当在页面中引用了该组件之后，只有该组件实例能访问该作用域。
在页面引用同一个组件，相互影响的问题
qq_40608283的博客
12-05 4014
只有第一个图可以显示，下面的图都不能显示出来，操作任何一个第一个图都会跟着变化。 echarts.init有问题，如果用了class或者id选择器选择元素来init了 错误示范： <template> <div class="liquid-fill-water"> <div class="liquid-fill-health" id="liquid-fill-health" ref="chartsliquid" ...
vue两个组件间值的传递或修改
weixin_38289645的博客
07-04 1万+
1、可以用公共的父组件来实现； 2、可以在store.js里面在设置公共变量； 3、也可以用本地存储localStorage.setItem()和localStorage.getItem()，通过修改本地存储的值和获取修改后的值来实现； 4、就是父子组件间的值的传递与修改props，这里需要注意的是子组件里面不      能直接修改props里面接受的值，需要定义一个中间变量来接受props...
vue 一个页面多次使用同一个组件,传值问题
小姐姐
11-30 4832
a
Vue与Angular以及React的区别？
LuckXinXin的博客
09-20 517
Vue与AngularJS的区别 Angular采用TypeScript开发, 而Vue可以使用javascript也可以使用TypeScript AngularJS依赖对数据做脏检查，所以Watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。 AngularJS社区完善, Vue的学习成本较小 Vue与React的区别 vue组件分为全局注册和局部注册，在react中都是通过import相应组件，然后模版中引用； props是可以动态变化的，子组件
vue父组件通过ref获取子组件data 的弊端
最新发布
03-20
在Vue中，父组件可以通过ref获取子组件的实，并且可以直接访问子组件的属性和方法。然而，这种方式存在一些弊端： 1. 过度依赖子组件的内部实现：通过ref获取子组件的data属性，意味着父组件需要了解子组件的内部...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值