关于父子间传值的那些事

刚开始接触公司业务,因为引用vuex的缘故,一直忽略了vue自身的子父传值优势,趁着项目需要,了解父子及非父子之间传值的故事。

1. 首先说一下为什么会用到子父传值以及为什么vuex如此流行。

首先,vuex作为一个数据状态管理工具,使命就是将需共享的变量存储在一个对象中,供全局其他的对象使用。在一般的大的项目中势必数据量较为庞大,同时变量间关系也较为复杂,vuex的应用使得一个状态共享多个不相关的组件,给开发者提供了不少方便的同时,也让项目更易于维护和管理;其次,在遇见数据量不大或者组件之间没有很大耦合性的同时,还是建议使用vue父子/子父/兄弟间传值,毕竟在不添加外来工具的情况下我们的项目会更加轻量。

2. 今天主要在项目的过程中遇见子父传值的问题,就拿出来做一个小总结。

*1* 父子之间传值

由于父子传值是单向的,所以子组件通过props接受父组件的值,并不能改变其值

父子之间传值代码

*2*子父之间传值

此传值是父组件通过引入子组件,监听子组件状态来完成传值

子父之间传值代码

*3* 兄弟之间传值

兄弟之间传值用vuex就能轻松解决,此处不多说,这里主要总结一下引用公共实例文件bus.js的解决方法。可以将其理解为一个公共仓库,用来搭建兄弟之间的桥梁来完成传值。在实际的项目中,公共实例化的文件可以在main.js中创建,以某项目为例,兄弟组件1用$on来监听数据变化,兄弟组件2用$emit来传递变化

兄弟之间传值

next.....

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 祝家人平安健康幸福快乐生意兴隆财源滚滚涛涛来 祝自己学业有成身体倍棒吃嘛嘛香身形苗条貌美如花人见人爱可以遇见很多可...
    阿一古捏阅读 1,868评论 0 0
  • 在看尼克松的<领袖们>时,看到戴高乐其中的一小段时,我认认真真的痛哭了至少五分钟,其实这段文字没有任何特别和...
    转角遇到最好的自己阅读 1,391评论 0 0
  • 不经意的一瞥 被你的色彩深深地吸引 怎么会? 你怎么会那么斑斓! 你如何会那么多彩! 在这长长的一排自行车中 不知...
    广电1702B高盼盼阅读 1,427评论 3 3
  • 【最美山西·文化】 难四(三)景公乃囚阳虎 (韩非子) 原文: 鲁阳虎欲攻三桓,不克而奔齐,景公礼...
    张梅霞欢乐诵阅读 4,140评论 0 0

友情链接更多精彩内容