一、Vue2中组件间通信
1. props/$emit
这是最基本的通信方式,父组件通过props向子组件传递数据,子组件通过$emit触发事件与父组件通信。props是单向数据流,只能由父组件传递给子组件,而且子组件无法修改这些数据。如果需要双向绑定,可以使用v-model指令,它实际上是语法糖,结合了props和$emit。
2. 全局事件总线(Global Event Bus)
这是一种实现任意组件间通信的方式,通过创建一个全局的Vue实例作为事件总线,组件可以向总线发送事件,其他组件可以监听这些事件并进行响应。这种方式不需要组件之间有明确的父子关系,但需要注意避免事件命名冲突。
3. $refs
通过在父组件中对子组件使用ref属性,父组件可以直接访问子组件的数据和方法。这种方式通常用于父子组件间的直接通信,但应谨慎使用,以避免破坏组件的封装性。
4. provide/inject
父组件通过provide提供数据或方法,子组件通过inject来接收这些数据或方法。这种方式主要用于解决跨层级组件间的通信问题,但同样需要注意维护组件的封装性和复用性。
5. Vuex
通过集中管理的状态库Vuex来共享状态,任何组件都可以通过store来访问和修改状态。Vuex适用于大型应用中多个视图依赖于同一状态的场景,能够有效地管理和同步状态。
6. 插槽(Slot)
插槽是一种将模板的一部分定义在父组件中,但在子组件的模板中进行展示的技术。这种方式主要用于内容的分发,而不是数据的通信。
7. 动态组件 & keep-alive
通过动态组件和keep-alive可以实现组件间的通信,keep-alive可以缓存不活动的组件实例,避免重复渲染和销毁。
二、Vue3中组件间通信
1. Props
这是父组件向子组件传递数据的一种方式。父组件通过数据绑定的形式声明要传递的数据,子组件则需要通过`defineProps()`方法创建props来接收这些数据。
2. Emit
子组件通过`$emit`方法向父组件发送事件,父组件可以监听这些事件并进行相应的处理。这种方式常用于子组件向父组件传递信息。
3. V-Model
这是Vue中特有的双向数据绑定语法糖,它实际上是`value`属性和`input`事件的结合体。在自定义组件中使用`v-model`时,需要同时使用`modelValue`属性和`$emit('update:modelValue', value)`方法来实现双向绑定。
4. Ref和defineExpose
`ref`是Vue中的一个基本响应式数据类型,可以用来在父组件中访问子组件或DOM元素。`defineExpose`则用于在子组件中定义可以被父组件通过`ref`访问的公共属性或方法。
5. Provide/Inject
这是一种跨层级的组件通信方式,允许父级组件提供数据,子级组件注入这些数据。这种方式主要用于解决深层嵌套组件之间的通信问题。
6. EventBus(也叫Bus)
通过创建一个全局的EventBus实例,组件可以在这个实例上触发事件和监听事件,实现跨组件的通信。
7. Vuex/Pinia
这是Vue的状态管理库,用于集中管理应用程序的所有状态。通过它们,组件可以共享状态,实现更复杂的跨组件通信。
8. Slot(插槽)
插槽是一种将模板的一部分定义为可替换的机制,通常用于组件内容的分发,也可以用于组件间的通信。
9. Mitt.js
这是一个独立的事件发射器和监听器库,可以用来实现组件间的通信,尤其是在没有Vue实例的情况下。
10. getCurrentInstance
虽然`getCurrentInstance`本身不是用于组件通信的,但它可以用来获取当前组件实例,从而访问其他组件实例的属性和方法。