VUE 子组件和父组件之间的传值

什么叫做子组件和父组件传值?他的概念和常用情况是什么?我的理解是这样的,子组件封装,父组件调用,但在代码中也只是在父组件,例如:goods.vue中使用shopcart(子组件)代码块.形成以下情况:
goods.vue :

<shopcart @on:cart-add="cartAdd"> </shopcart>

而在使用过程中常常需要把子组件的值传给父组件以达到值实时显示的效果,譬如说,购物车,在子页面添加的商品在商品总列表页也需要出现,所以其中的数据与属性都是共享的,因此子组件的值要实时的传递给父组件就必然要采用子组件与父组件传递的方式。
子组件:
采用 e m i t 方 式 提 交 , 将 传 递 的 名 称 与 值 传 递 过 去 父 组 件 : 使 用 emit方式提交,将传递的名称与值传递过去 父组件 : 使用 emit,:使on方式接收即可

子组件:
this.$emit('cart-add',type); 
这里的cart-add与父组件$on的名称是一致的,而type则是传递的值
父组件 : 
methods:{
	cartAdd(val) {
		//此时cartAdd显示的就是cart-add名称对应的函数,而val则是子组件传来的type
		this.type = val ;
	}
}

上述是子组件向父组件传值的方式,而父组件像子组件传值则更加简单,父组件绑定,子组件采用props接收即可,例:

父组件 : 
<shopcart :shuzhi="top"> </shopcart>
子组件 : 
props:{
	top : {
		type : 类型,
		default : 默认值
	}
}

这样即可。若有不同理解,还请下方留言,互相交流,感谢

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值