pubsub-js

在vue中使用pubsub-js

1、安装
npm install --save pubsub-js
2、引用
方式1：全局注册
main.js中全局导入 pubsub-js
import pubsub from 'pubsub-js'
Vue.prototype.$pubsub = pubsub // 全局注册，使用方法为 this.$pubsub

方式2：组件内引用

import pubsub from 'pubsub-js'

3、使用（不同组件之间的传值）

全局注册的使用

传值：
 this.$pubsub.publish('sdata','data')
接值：
 this.$pubsub.subscribe('sdata',(msg,data) => {           //注意此处得使用箭头函数
  console.log(data)
}

组件引用的使用

订阅方组件
import pubsub from 'pubsub-js'
mounted(){ // 执行异常代码
 // 订阅消息
 pubsub.subscribe('deleteTodo',(msg,index)=>{
  this.deleteTodo(index) // 调用deleteTodo方法执行真正的业务逻辑
 });
},

发布方组件：
<script>
 import pubsub from 'pubsub-js'
 export default{
  methods: {
   handlerEnter(isEnter){
    if (isEnter) {
     this.bgColor = 'gray';
     this.isShow = true;
    } else {
     this.bgColor = 'white';
     this.isShow = false;
    }
   },
   deleteItem(){
    // 表示从this对象中取出todo,index,deleteTodo三个对象
    const {todo, index, deleteTodo} = this
    if (window.confirm(`确认删除${todo.title}吗？`)) {
     // 发布消息
     pubsub.publish('deleteTodo', index); //deleteTodo一定要与订阅方名称一样，index是通信的具体数据
    }
   }
  }
 }
</script>