现在的前端开发,基本上都是组件化开发的,熟练的开发元,会在项目启动前,浏览项目所有的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()
这个是子向父传值,必要用到的一个方法名。
首先,我们在引用子组件的父组件页面上,再起标签上定义一个方法,这个方法主要是用来获取传递来的值的。
如图:
如此,父组件这边的操作就全部完成了。
下面:我们去到子组件的部分
因为小编的代码不是测试的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
},