vue--没啥关系组件之间的通信

vu通信之间有很多种通信方法，很常见的比如写一个组件，子传父，父传子；通过路由之间通信

下面我介绍的是相互之间没有关系的组件之间通信的方法

• 第一种：使用event-bus来订阅发布，并且挂载到Vue.protytype之上

1. 首先，新建一个event-bus.js

   class Bus{
     constructor(){
       this.callbacks = {}
     }
     $on(name,fn){
       this.callbacks[name] = this.callbacks[name] || []
       this.callbacks[name].push(fn)
     }
     $emit(name,args){
       if(this.callbacks[name]){
         // 存在 遍历所有callback
         this.callbacks[name].forEach(cb=> cb(args))
       }
     }
   }
   
   Vue.prototype.$bus = new Bus()
   

    

2. 使用与监听

   // 使用
   eventBus(){
       this.$bus.$emit('event-bus','消息')
   }
   
   // 监听
   this.$bus.$on("event-bus",msg=>{
       this.msg = '接收event-bus消息:'+ msg
   })
   
   

    

•  第二种：使用vuex

1. 其实vuex很简单，简单的理解来说就是一个数据管理框架，大家将数据都放到一个地方，由这个地方指定的命令来存储和读取数据。先上一段代码

   
   
   
   
       
       
       
       
       
       
   
   
   
       
   
           
   {{msg}}
           点击
           
       
   
       
   
   
   

    

2. 根据以上例子我们来解读一下vuex的规则：

• state是vuex的公共状态，我们可以把它看作所有组件的data，取值是this.$store.state.count
• mutations可以理解为所有组件的methods属性，mutations对象中保存着更改数据的回调函数,第一个参数是state, 第二参数是payload, 也就是自定义的参数。传值： this.$store.commit('changeName', '哥哥')
• actions类似于mutations，不同在于actions提交的是mutations，而不是直接改变其状态；actions可以包含异步操作；actions中回调函数的第一个参数是context,是一个与store实例具有相同属性和方法的对象。传值：this.$store.dispatch('incrementAction', 500)
• getters可以理解为所有组件的computed属性，getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。取值：this.$store.getters.username