vue的组件间(路由间)父子传值

本文介绍了Vue中父子组件间的通信方式,包括通过prop进行父传子、使用$emit实现子传父,以及通过router-view进行路由传值。强调了在不同场景下选择合适通信方式的重要性,如需双向绑定或避免刷新丢失,应考虑使用全局变量或内存变量。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

父传子-prop

详见官方说明
https://cn.vuejs.org/v2/guide/components-props.html
注意:
为了html的规范,在使用props传值的时候,在父组件引用时变量不用驼峰命名用-连接。参考vue啊element的组件都是-连接的。对应代码如下:

// 子组件
props: ['whichData'],
// 父组件 建议规范化使用
<my-icon which-data="device"></my-icon>
// 或 父组件引用时直接驼峰命名 其实也可以
<my-icon whichData="device"></my-icon>

子传父-emit

注意:
this.$emit()是子组件往父组件传值,使用该方法无法拿到返回值。
如果子组件需要拿到父组件处理完成后的返回值,则应该使用props。

路由传值router-view

其实也是组件,是一个特殊的组件,所以拥有组件的属性和方法,虽然官方并没有举例说明。

// 通过:传值;
// 通过@子通知父调用函数;
// 通过ref打锚点方便父调用子组件。
<router-view :rawData="rawData" @whichMonitor="currentMonitor" ref="monitorChild"/>

小结

父子间传值可以三选一

1、porp+emit
2、统一使用全局变量。
关键在于,传值是否是双向的,是否经常变动,是的话,建议使用全局变量,然后父子都去修改监控。
3、使用内存变量。
关键在于,变量是否刷新重载,只有存在window对象中localStorage、sessionStorage的变量,才不会受到页面刷新的影响。
但需要注意不使用或者退出系统时手动清除,避免一些麻烦。

注意:
若父子需要监控的全局变量是个数组,建议额外增加一个布尔标识量,监控布尔值变化时获取数组的值。
因为直接监控数组变化经常会监控不到。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值