uniapp 使用vue3 子传父数据在传递过程中将数据进行筛选过滤

购物车内数据来自pinia。
商品数据来自服务器
原先的计划是将本地持久化数据获取后通过商品id方式过滤后展示已选商品，但是在实际操作中发现在购物车列表内添加的商品不能时时在商品列表中展示出来，这里封装了一个数字框组件

<script setup>
import { onReady } from '@dcloudio/uni-app'
import { ref } from 'vue';
	// 接收父组件传递的参数
	const props = defineProps({
		// 传递过来是商品信息
		value: Object,
		// 传递过来的购物车信息
		cartValue:Number
	})
	// 提交点击事件给父组件
	const emit = defineEmits(['update'])
	const carClick = (value) => {
		emit('update', {"value":value,'carNumber':props.cartValue+1})
	}
</script>


<template>
	<view class="goods-item">
		<view class="left">
			<img :src="value.category_cover" v-if="value.category_cover" alt="" />
			<img v-else src='@/common/image/logo.jpg' alt="" />
		</view>
		<view class="right">
			<view>
				{{value.title}}
			</view>
			<view class="count">已售{{value.sales}}件</view>
			<view class="price">
				<view class="new">¥{{value.price}}</view>
				<view class="old">¥{{value.price}}</view>
			</view>
			<view class="car" @click="carClick(value)">
				<uni-badge class="uni-badge-left-margin" :text=cartValue absolute="rightTop" size="small" :offset="[2, 9]">
					<uni-icons type="cart-filled" size="30" color="#eea2a4"></uni-icons>
				</uni-badge>
			</view>
		</view>
	</view>
</template>


<style lang="scss" scoped>
	.uni-badge-left-margin {
			margin-left: 50px;
		}
	.goods-item {
		height: 148px;
		margin-bottom: 1px;
		padding: 10px;
		background-color: #fff;
		display: flex;

		.left {
			width: 127px;

			img {
				display: block;
				width: 90%;
				border-radius: 50rpx;

			}
		}

		.right {
			flex: 1;
			font-size: 14px;
			line-height: 1.3;
			padding: 10px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

			.count {
				color: #999;
				font-size: 12px;
			}

			.price {
				color: #999;
				font-size: 16px;

				.new {
					color: #f03c3c;
					margin-right: 10px;
				}

				.old {
					view-decoration: line-through;
					font-size: 12px;
				}
			}
		}
	}

	.car {
		top: 30px;
		left: 30rpx;
	}
</style>

原本的计划是把购物车里面的数据和商品信息一起传递给子组件进行筛选获取已选商品的数量，但是在实际操作过程中在购物车页面添加了数量后持久化存储数据后回到商品展示页面不能时时更新数量。
后来通过在父组件给子组件传递数据时父组件先调用函数过滤好数据后再传值给子组件解决
这里在父组件渲染组件时先调用computerNumber函数，通过传入的商品id后在computerNumber里面筛选已经添加到购物车里面的数据，最后返回已经添加进购物车里面的数值，并传递给子组件，把所有的数据操作都交给pinia.
原先学习过程中只是以为父传子必须要传递字符串或者绑定的内容，这里使用函数也是扩展了我的知识内容，解决我现有的问题，现在已经可以实现在商品展示页面添加数据和购物车页面增加数据两边可以同步时时更新的目的。