什么叫做子组件和父组件传值?他的概念和常用情况是什么?我的理解是这样的,子组件封装,父组件调用,但在代码中也只是在父组件,例如: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 : 默认值
}
}
这样即可。若有不同理解,还请下方留言,互相交流,感谢