组件间通信：订阅和发布消息

订阅消息和发布消息可以实现跨组件通信。使用订阅和发布消息方式实现组件间通信，需要先在项目下安装pubsub-js库。

在项目下安装pubsub-js 库，库内包含subscribe订阅消息和publish发布消息方法。

npm install --save pubsub-js

订阅和发布消息都是异步操作。使用订阅和发布消息功能要在组件中引入pubsub-js库。

import PubSub from  "pubsub-js"

//订阅
PubSub.subscribe('消息名称',(msg,index)=>{
    this.事件(index);
});
//发布
PubSub.publish('消息名称',index);
//任何地方都可以用，比如父子组件通信等等

在父组件中导入pubsub-js库后，将订阅消息放在父组件的mounted中，执行异步代码：

    import PubSub from  "pubsub-js"

    export default {
        mounted(){
            //订阅消息（添加到购物车的消息）
            PubSub.subscribe("homeAddToCart",(msg,goods)=>{
                if(msg==="homeAddToCart"){
                    //判断用户是否登陆
                    if(this.userInfo.token){//已经登陆
                        this.dealAddGoods(goods);//抽离出来，处理商品的添加
                    }else{
                        //没有登陆
                        this.$router.push("/login")
                    }
                }
            })
        },

        methods: {
            //实现商品添加的方法-添加商品到购物车方法 异步
            async dealAddGoods(goods){
                //调用服务器端接口
               let result = await addGoodsToCart(this.userInfo.token,goods.id, goods.name, goods.price, goods.small_image,);
                console.log(result);
                if(result.success_code === 200){
                    //同步本地数据
                    this.ADD_GOODS({//追加
                        goodsId:goods.id,
                        goodsName:goods.name,
                        smallImage:goods.small_image,
                        goodsPrice:goods.price
                    });
                    Toast({
                        message:"添加购物车成功！",
                        duration:800
                    });
                }
            }
        }
    }

在子组件中同样导入pubsub-js库后，然后发布消息：

    import PubSub from "pubsub-js"
    export default {
        name: "FlashSaleItem",
        props:{
            product:Object
        },
        methods:{
            addToCard(goods){
                //发布,通过homeAddToCart进行接收，把goods抛出去
                PubSub.publish("homeAddToCart",goods);
            }
        },
        beforeDestroy() {
            PubSub.unsubscribe("homeAddToCart");
        }
    }

工作过程可以这样理解：

现在子组件中发布消息，其中homeAddToCart是消息名称，goods是通信数据。然后父组件订阅消息homeAddToCart(可以理解为接收消息)，在订阅消息中的回调函数继续执行具体已定义的函数。

**销毁订阅事件：**在组件销毁之前，我们需要调用unbsubscribe方法，手动销毁订阅消息：

    beforeDestroy() {
        PubSub.unsubscribe("homeAddToCart");
    }