[JavaScript知识库]vue组件通信中常见的5种方法

说起组件通信，可能大家耳熟能详的有以下5种:

1. 父传子
   父组件通过自定义属性给子组件传值，子组件用props接收

2. 子传父
   父组件在子组件标签上自定义事件，子组件通过$emit来触发自定义事件，并且可以传递参数

3. 非父子组件传值
   eventBus事件总线：
   可通过eventBus进行信息的发布与订阅（创造一个都能访问到的事件总线）

Vue.prototype.$eventBus = new.Vue();

// A组件中,监听 bus的事件
this.$eventBus.$on("事件名",function(参数A,参数B, ...){
	...
});
// B组建中,触发 bus事件
this.$eventBus.$emit("事件名", 参数A,参数B, ...)

4. vuex
   vuex是专为vue.js应用程序开发的状态管理模式，它采用集中式存储管理程序的所有组件的状态，解决多组件通信。多用于大型项目,其中包括五种属性 state, getters, mutations, actions, modules vuex的用法
5. refs
   通过添加ref和·$refs·配合，也可以很方便的获取子组件，访问调用子组件的属性和方法
   关于refs，我还另外单独写过一篇详细用法的，refs的用法

_{另外还有五种下次再说}~~

参考链接: https://blog.csdn.net/weixin_46185369/article/details/121313989