[{"data":1,"prerenderedAt":156},["ShallowReactive",2],{"content:\u002Fposts\u002F2024\u002Fcomponents-ref-or-props":3,"surround:\u002Fposts\u002F2024\u002Fcomponents-ref-or-props":145},{"id":4,"title":5,"body":6,"canonical":125,"categories":126,"date":128,"description":129,"draft":130,"extension":131,"image":125,"meta":132,"navigation":133,"path":134,"permalink":125,"readingTime":135,"recommend":125,"references":125,"seo":140,"sitemap":141,"stem":142,"tags":143,"type":125,"updated":128,"__hash__":144},"content\u002Fposts\u002F2024\u002Fcomponents-ref-or-props.md","Vue 组件设计 -- 父子组件调用时使用props还是ref？",{"type":7,"value":8,"toc":114},"minimark",[9,13,16,19,23,26,31,38,47,52,63,67,71,82,86,94,97,100,111],[10,11,12],"p",{},"最近在和朋友讨论一个问题，感觉蛮有趣的。他写程序时间没我长，所以有一些问题会和我一起讨论，在这期间，常常会给我带来另一种角度来看待某个问题。",[10,14,15],{},"比如今天我们要讨论的一个组件要调用另一个组件的时候，我们该使用 props 传递让子组件来处理还是直接在父组件中通过 ref 调用子组件的函数。",[10,17,18],{},"毫无疑问的说，我是更加倾向于 props 传递，具体状态改变或者函数调用交于子组件处理的。",[20,21,22],"h2",{"id":22},"优缺点比较",[10,24,25],{},"我们先来说明一下两者的优缺点：",[27,28,30],"h3",{"id":29},"通过-ref-调用子组件的方法","通过 ref 调用子组件的方法",[32,33,34],"ul",{},[35,36,37],"li",{},"优点",[39,40,41,44],"ol",{},[35,42,43],{},"可以直接调用子组件方法",[35,45,46],{},"方便直接控制子组件行为",[32,48,49],{},[35,50,51],{},"缺点",[39,53,54,57,60],{},[35,55,56],{},"耦合度高：父组件使用时强依赖于子组件暴露的方法",[35,58,59],{},"可维护性差：多次用到需要在不同的代码里维护想通的调用方式",[35,61,62],{},"可读性差",[27,64,66],{"id":65},"通过-props-传递","通过 props 传递",[32,68,69],{},[35,70,37],{},[39,72,73,76,79],{},[35,74,75],{},"耦合度低，只依赖于 props 的状态",[35,77,78],{},"可维护性强",[35,80,81],{},"可测试性高",[32,83,84],{},[35,85,51],{},[39,87,88,91],{},[35,89,90],{},"灵活性差",[35,92,93],{},"可能需要传递大量的状态",[20,95,96],{"id":96},"思考",[10,98,99],{},"下面我来说下我对于此观点的思考：",[39,101,102,105,108],{},[35,103,104],{},"从代码耦合度方面考虑，props 传递明显是好于通过 ref 调用组件方法的；",[35,106,107],{},"从维护方面来看，通过 props 传递可以明确数据流向，容易理解；",[35,109,110],{},"从容易使用方面来看，通过 ref 调用组件方法是有好处的，但这仅限于对全部代码十分了解的情况下。二次开发和对组件重构时就需要做大量操作了。",[10,112,113],{},"我建议优先通过 props 传递，这样可以使组件更加容易维护和阅读。",{"title":115,"searchDepth":116,"depth":116,"links":117},"",4,[118,124],{"id":22,"depth":119,"text":22,"children":120},2,[121,123],{"id":29,"depth":122,"text":30},3,{"id":65,"depth":122,"text":66},{"id":96,"depth":119,"text":96},null,[127],"代码","2024-11-26 23:57:12","关于组件设计的一点思考。",false,"md",{},true,"\u002Fposts\u002F2024\u002Fcomponents-ref-or-props",{"text":136,"minutes":137,"time":138,"words":139},"3 min read",2.355,141300,471,{"title":5,"description":129},{"loc":134},"posts\u002F2024\u002Fcomponents-ref-or-props",[96],"yZXr5MErJeAIJusZg9Ty9euVppQxs1AtmAUTLi0vHTk",[146,151],{"title":147,"path":148,"stem":149,"date":150,"type":125,"children":-1},"Http Status Codes 释义","\u002Fposts\u002F2024\u002Fhttp-status-codes","posts\u002F2024\u002FHttp-Status-Codes","2024-10-23 21:18:21",{"title":152,"path":153,"stem":154,"date":155,"type":125,"children":-1},"Rsbuild创建项目","\u002Fposts\u002F2024\u002Frsbuild-create-demo","posts\u002F2024\u002Frsbuild-create-demo","2024-12-08 10:08:01",1789642591378]