【Electron + Vue】数据流转的几种方式
1. Electron 与 Vue 之间的数据交互
2. Vue 内部的数据交互
2.1 父组件向子组件传递数据:props 和 attributes
传递 props 和透传 attributes 是两种常见的将数据传入组件的方式。
传入一个属性或者是事件,如果这个属性、事件没有在组件中定义,那么它依然是透传属性,因为没有东西接受它。
如果是事先定义了
defineEmits
或defineProps
来接受它,那么它就是 props 属性或自定义事件,不再是透传属性。——[《一文搞懂Vue3中的透传属性》](https://juejin.cn/post/7086724982486597668)
2.1.1 Props
有关 props 的用法可参考《组件基础·传递 props》 和 《Props》。
另外,Vue 的代码规范强烈建议在声明 props 的时候加上类型定义。
2.1.2 Attributes
如果传递给一个组件的属性没有被该组件声明为 props 或者 emits,这个属性便是“透传 attribute”。不过通常情况下还是会使用 props 向子组件传递数据。
2.2 祖先组件向后代组件传递数据:依赖注入
若是在深层次的组件树结构中通过 props 逐级传递数据,会使代码变得繁琐冗长,导致 prop 逐级透传问题。依赖注入便可以解决这个问题。
2.3 多个组件共享数据:状态管理
有时候,可能会有多个组件依赖于或者要修改同一个数据。这些组件可能位于组件树的不同子树上。此时可以将这个数据提取出来,放到一个全局的单例中来管理。这样,任何位置上的组件都可以访问或更新此数据。
Vue 有关状态管理的文档给出了其由来与方法,并推荐了 Vue 的专属状态管理库 Pinia。