Vue3组件(18)组件间传值/共享的方法的汇总

方法集合

父组件.png

目前只能想到这些了,对了,还有事件总线这类的就不考虑了。

props + emit

最基础的方式,适用于 父组件和子组件之间的直接传值,多用于基础控件,比如input、el-input、el-select这类。
比较基础不多介绍了。

Vuex

老牌的状态管理方式,各种组件之间各种传值,好吧专业术语叫做状态管理。

使用方法呢,其实就是一层窗户纸,捅破了大家就都知道了,这里不介绍了,可以看我的文集:
https://www.jianshu.com/nb/49384194

indexedDB

这个不是前端存储吗?也可以共享数据?

当然可以了,只是没有响应性而已。
使用方式可以参考这里:https://www.jianshu.com/p/607c01749168
当然也可以用其他第三方的封装类来管理。

Vuex挺强大的,只是有个小问题,不支持状态的保存,比如一刷新状态就没了,更不用提关掉网页等操作了。

那么如果我想长期保存状态呢?这时候就需要用到前端存储,比如localStrage或者indexedDB。

Vuex + 前端存储,二者配合起来就更强大了。

indexedDB的特点是可以长期保存数据,而且容量很大,那么是不是可以把字典数据存进来呢?然后让state来加载这些数据,这样的话就不用每次(打开页面)都到后端去获取数据。
既快捷又减轻后端的压力。

provide 和 inject 的注入方法

这个还是很简单粗暴的,目前正在研究,应该可以实现代替 Vuex 的数据状态管理方案。

因为Vuex不太适合Vue3的环境,应该可以有替代方案了。
在这里探讨了一下:https://www.jianshu.com/p/25b8e8a7e319
当然还很粗糙,距离完善还有很长的路要走。

后端API

这个家伙怎么也来了?跑错片场了吧。

其实不然,可能大家早就在默默的使用这种方式了。

比如博客网站,打开一篇博文,看着兴起写了一个讨论发了出去。

这时候讨论组件会把讨论数据提交给后端,后端处理后返回给前端,讨论组件得到确认回复后,是不是要告诉讨论列表组件:你有新的消息,请注意更新一下。

这是讨论组件就会向后端API申请新的讨论列表数据。

这样看来,讨论数据是不是经由后端API传递给另一个组件的呢?

好吧,有点杠的味道,但是原理就是这样的,我是想告诉大家,不要限制思维,发散一下总不会有错。

可能有人会说,你这是古老的思路,完全不懂现在的前端开发的思想,还。。。。

好吧,还是上面的例子,稍微改一下流程。

讨论组件向后端API提交数据的同时,把讨论数据共享给列表组件,列表组件不管三七二十,先显示了再说。

这样用户可以在第一时间在讨论列表里面看到自己发的讨论信息。

但是这还没有完,后端有没有成功保存讨论呢?

讨论组件得到后端的回复之后,还要做一下处理:
1、如果成功了,告知讨论组件新的讨论数据的ID
2、如果失败了,告知讨论组件,刚才的那条讨论数据没成功,你得通知用户。

讨论组件也要做相应的处理。
1、如果得到成功的通知,设置新的ID,为删除操作提供ID,否则删除操作咋办。
2、如果得到失败的通知,要告知用户失败了,并且问问用户,是否重发。

然后还有个小问题,如果讨论非常激烈,又有几个新的讨论出现了,那么什么时候更新这些讨论?是让用户手动更新,还是自动更新,还是讨论组件提交数据后,后端自动判断是否有新的讨论,如果有,一起返回给前端?

好像跑题了。

总之要设计好一个应用,各种细节问题,用户交互问题,都是需要考虑的。果然跑题了。。。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容