uniapp 组件之间的相互传值

现在的前端开发，基本上都是组件化开发的，熟练的开发元，会在项目启动前，浏览项目所有的UI图，并整理出其中，功能，布局几乎相同的部分，然后将其做组件话，作为一个个子组件引入到需要使用的父组件之中，但这样，在数据交互时，就避免不了，组件之间会有需要传递数据的情况。

接下来，小编我会从父向子，子向夫俩个方面来讲解如何传值

1.父向子

父向子传值的过程时比较简单的，在你获取到一个需要传输的参值时，先将其绑定到data下

然后，找到我们需要传值的子组件在骨架中的部分

如图：

此处的modalTwo标签则就是我引入的子组件

然后可以发现，图中，小编我个人是使用了v-for来列表循环渲染这个子组件的，然后将每一次循环的项，即：item,使用

：item="item"

传输过去。

最后，我们到传值的子组件的页面中

去接收传递来的值，毕竟关传递不接收，是没用的，于是在这里，我们需要使用到一个proprs的属性，

注意了重点来了

props下接收，传递来的属性名，最好是于父组件那边传值时用相同的命名，且要声明，这个属性是什么

小编我传值来的item，是一个数组内的元素项，里边包含很多不同的数据内容，且这个项在控制台被识别人‘对象’，即Object，

所以我在props下的item，声明它为Object类型。

PS：传输来的内容是没法直接修改使用的，如果当需求有需要在子组件的部分，修改传输来的内容，要先将内容，存储到data下，再去修改，（如何存储，小编我已经在截图上也显示出来了，即：data下itemData的部分

如此，父向子传值的过程就全部完成了。

PS：传输的值可以不止一个，可以在标签上写多个，但建议如果太多的时候，建议，将其整合成为一个对象，或者数组，具体怎么方便怎么来，然后再去传输，接收就行了

2.子向父

在实际的项目中，我们碰到子向父传值，分为俩种。

1.直接传值，即你在子组件自己定义一个数据，或请求接口获取到数据来传递给父组件

2.事件点击传值，即你在子组件触发了一个点击事件来传递给父组件

首先，我们要先记住一个方法名：

$emit（）

这个是子向父传值，必要用到的一个方法名。

首先，我们在引用子组件的父组件页面上，再起标签上定义一个方法，这个方法主要是用来获取传递来的值的。

如图：

方法名称随你定义，但注意不要和已存在的方法名发生重复

然后再methods中将定义的方法函数添加景区

如图：

如此，父组件这边的操作就全部完成了。

下面：我们去到子组件的部分

因为小编的代码不是测试的demo，是实际项目的，所以小编所遇到的是子组件中的点击事件出发子向父传值的，所以再对应的点击事件中，获取到需要的值后，使用上述讲的一个关键方法：$emit（）

来进行传值，如图：

$emit(）中声明要传的参数，和自己定义的方法名。

注意：方法名要保持一直，不然会接收不到传递的参数

图中，小编定义的方法为：send_one,所以在$emit(）使用的方法名也为：send_one

如此就可以拿到了。

如需求，不是和小编一样是在点击事件中传值的，在onload(),或者created()中，获取到自己需要的内容，然后再使用

$emit(） 传值

 

给大家补充一个小知识点：

组件传递来的值本身是无法改变，如果你真的要改变，可以在data中定义一个变量，作为临时储存值的变量空间，并使用它，来进行改变。

代码如下：

props: {
			items: Object
		},
		data() {
			return {
				cartcount: 0, //购物车数量

				gid: '', //商品ID

				goods: {}, //商品信息

				specs: [], //规格

				options: [], //规格列表

				// 规格信息
				img: '', //商品图

				title: '', //商品名称

				ku: 0, //库存

				price: '0.00', //价格


				goodsnum: 1, //数量

				zid: '', //规格组合ID

				skname: '', //规格名称
			};
		},
		created() {
			console.log('传输的数据：', this.items)
			//将传值储存为临时储存对象，供于修改
			this.gid = this.items.gid
			this.goods = this.items.goods
			this.specs = this.items.specs
			this.options = this.items.options

			// 默认
			this.img = this.goods.thumb
			this.title = this.goods.title
			this.ku = this.goods.total
			this.price = this.goods.marketprice
		},