父子组件全选值，去重（$ref通道）

最新推荐文章于 2022-11-29 15:47:03 发布

一个前端不会用git

最新推荐文章于 2022-11-29 15:47:03 发布

阅读量200

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript Vue 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/maoxiaohei_/article/details/117919551

Vue 同时被 2 个专栏收录

57 篇文章

订阅专栏

javascript

22 篇文章

订阅专栏

该博客介绍了在Vue中如何通过$refs实现父子组件间的通信，子组件通过getData方法返回数据到父组件。父组件接收到数据后进行深拷贝，并对数据进行过滤和累加操作，检查是否有超出库存的情况。当发现库存超出时，会进行相应的提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子组件的方法数据，存储在getData里面

		//把值通过getData方法返回给上级页面（用$ref,实现父子组件通道）
		getData() {
				//this.selecteddata是页面上的值列表
				this.selecteddata.forEach(item => ({
					ids: item.ids, //商品id
					title: item.title, //商品名称
					store: item.store, //仓库名称
					user_name: item.user_name,
					starvalue: 0, //步进器值
					goods_unit: item.goods_unit,
					goods_count: item.goods_count,
					checked: false,
					disabled: false,
					goods_apply: item.goods_apply,
					used_area: item.area,
					used_user: item.used_user
				}))
				return this.selecteddata
				console.log(JSON.stringify(this.selecteddata))
			},

父页面

<!--子组件 用过ref打开子组件的通道，直接在父页面上使用子页面的方法和值-->
<drawing :checkeds="checkedstate" ref="usernameInput" style="margin-bottom: 50px;"></drawing>

// 提交申请
	submitapplications() {
				//深拷贝
				let addgoodslist = JSON.parse(JSON.stringify(this.$refs.usernameInput.getData()));;
				const res1 = JSON.parse(JSON.stringify(this.list)).filter((i) => i.checked); // 过滤出 checked 为true的
				const res2 = addgoodslist.filter((i) => i.checked); // 过滤出 checked 为true的
				res1.forEach((item) => {
					// 循环res1
					const index = res2.findIndex((i) => i.ids === item.ids); // 找出res2中 和当前 一样的商品
					if (index > -1) {
						// index > -1 则 存在相同产品
						item.starvalue += res2[index].starvalue; // 数量累加
					}
				});

				res2.forEach((item) => { // 循环res2, 取出 res1中 没有的, 塞进res1
					const index = res1.findIndex((i) => i.ids === item.ids);
					if (index === -1) {
						res1.push(item);
					}
				});

				if (res1.findIndex((i) => i.starvalue > i.goods_count) > -1) {
					// 判断是否存在 超出库存的
					// 超出库存
					console.log('超出库存')
				}
				console.log(res1)
				console.log(JSON.stringify(
					res1
				)); // [{"ids":1,"checked":true,"starvalue":1,"goods_count":1},{"ids":2,"checked":true,"starvalue":1000009,"goods_count":242624}]
			},