组件是vue最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：
如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。
针对不同的使用场景，如何选择行之有效的通信方式？
- 使用 props(父传子), 使用emit(子传父)
- props 单向数据流，父组件向子组件传递数据，不允许子组件修改props
- 支持传递静态或者动态prop，支持多种数据类型，包含数组，复杂对象
- 支持prop验证类型检查
- v-model / emit(父子互相通信)
- v-model 和 props的区别
- 使用 props / emit，如果要更新父组件的数据，还需要在父组件定义好方法，然后去绑定事件给子组件，才能够更新。而使用 v-model / emit ，无需如此，可以在子组件直接通过 “update:属性名” 的格式，直接定义一个更新事件
- expose / ref
- expose 与 ref 主要用于父组件获取子组件的属性或方法。在子组件中，向外暴露出属性或方法，父组件便可以使用 ref 获取到子组件身上暴露的属性或方法
- attrs 方式
- attrs 主要用于 子组件获取父组件中没有通过props接收的属性
- provide / inject 方式
- provide / inject 方式是 Vue 中提供的一对API，无论层级多深，API都可以实现从父组件到子孙组件的数据传递，主要为 父组件向子组件或孙组件或多级嵌套的子组件通信。
- provide： 在父组件中可以通过 provide 提供需要向后代组件传递的信息
- inject：从父组件到该组件，无论嵌套多少层，都可以直接用 inject 拿到父组件传送的信息。
- Vuex/Pinia
-
vuex 是针对vue的一个状态管理插件 -
Pinia 是 Vue 的存储库，也是为了实现跨组件/页面共享状态
- localStorage/sessionStorage
- localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空，只支持字符串类型的存储，推荐getItem\setItem这两种方法对其进行存取
