现在的前端开发，基本上都是组件化开发的，熟练的开发元，会在项目启动前，浏览项目所有的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
},
