关于H5布局思考

截屏2020-09-29 下午3.43.40.png

1. 我们一个App 的H5需要多个界面，举例：tabbarController底部的控制器，需要加载四个模块分别为首页、交易、法币、我的。这四个模块，我们分别列出四个文件夹，每个文件夹对应一个模块，在每个模块内都会有一个入口index.vue。所有的跳转接入点都是从这里开始。
2. 我们如何进行相关类扩展

H5 有意思的架构：
MVCS 关于这个架构，我感觉还是很有意思的，之前在滴滴时候，由于项目是组件化生产的，一个完整项目是很多组件拼接而成的，其中数据层store跟现在目前接触的Vue项目很相似。socket 不断的打数据进入store 层，业务层使用数据的时候从 store层面取数据即可。
关于业务组件之间如何进行通讯?
为了防止组件 自身修改属性同外部调用修改组件属性时两者同时调用而引起错误，所以vue的公共属性只能允许外部调用更改而不允许组件自身修改。也就是说自己的public 成员变量自身不能修改，需要将这个属性传递到组件外面，该组件的上一层对该组件相关属性修改。
但是vue组件间通过什么进行通讯呢？
第一种：props/emit 属性进行组件间通讯。父组件 A 通过 props 的方式向子组件 B 传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。
总结：父组件通过 props 向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed

什么是v-on方式

动态事件 (2.6.0+) 
<button v-on:[event]="doThis"></button>
 缩写 
<button @click="doThis"></button>

第一种：这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案 vuex。
1.具体实现方式：

    var Event=new Vue();
    Event.$emit(事件名,数据);
    Event.$on(事件名,data => {});

关于组件通信参考链接
https://www.cnblogs.com/fundebug/p/10884896.html