Vue任意组件通信之消息订阅与发布（pubsub）

消息订阅与发布，它也是一种组件间的通信方式。适用于任意组件间通信。

使用步骤：

1.安装pubsub：npm i pubsub-js

2.在发送数据以及接收数据的组件中，引入pubsub-js：import pubsub from 'pubsub-js'

3.假设有两个组件，分别为组件A，组件B。A组件要接收数据，则在A组件中订阅消息。

A组件订阅消息代码：

<template>
    <div class="about">
        <h1>我是about组件</h1>
        <h2>姓名：{{name}}</h2>
        <h2>年龄：{{age}}</h2>

    </div>
</template>


<script>
    //引入pubsub
    import pubsub from 'pubsub-js'
    export default {
        data(){
            return {
                name:'',
                age:''
            }
        },
        methods:{
            getData(msgName,obj){
                this.name = obj.name;
                this.age = obj.age
            }
        },
        mounted(){
            //利用pubsub下面的subscribe方法来订阅消息。接收组件发布过来的消息。并执行回调方法。方法里面的参数obj就是传递过来的数据。
            //注意：回调的第一个参数默认是消息名称，所以需要msgName来占位
            this.pid = pubsub.subscribe('Data',this.getData)
        },
    }
</script>

B组件发布消息，传递数据代码：

<template>
    <div class="home">
        <hr>
        <h1>我是home组件</h1>
        <h2>姓名：{{obj.name}}</h2>
        <h2>年龄：{{obj.age}}</h2>
        <button @click="setData">点击发送数据</button>
    </div>
</template>




<script>
    import pubsub from 'pubsub-js'
    export default {
        name: 'Home',
        data(){
            return {
                obj:{
                    name:'孙悟空',
                    age:99
                }
            }
        },
        methods:{
            setData(){
                //通过pubsub下面的publish来发布消息，进行传递数据。
                pubsub.publish('Data',this.obj)
            }
        }
    }
</script>

未传值前效果：

 传值后效果：

 4.在使用完之后。最好在beforeDestroy这个钩子中，用pubsub.unsubscribe(this.pid)去取消订阅。

代码：

<template>
    <div class="about">
        <h1>我是about组件</h1>
        <h2>姓名：{{name}}</h2>
        <h2>年龄：{{age}}</h2>

    </div>
</template>


<script>
    //引入pubsub
    import pubsub from 'pubsub-js'
    export default {
        data(){
            return {
                name:'',
                age:''
            }
        },
        methods:{
            getData(msgName,obj){
                this.name = obj.name;
                this.age = obj.age
            }
        },
        mounted(){
            //利用pubsub下面的subscribe方法来订阅消息。接收组件发布过来的消息。并执行回调方法。方法里面的参数obj就是传递过来的数据。
            //注意：回调的第一个参数默认是消息名称，所以需要msgName来占位
            this.pid = pubsub.subscribe('Data',this.getData)
        },
        beforeDestroy(){
            //利用pubsub下面的unsubscribe方法来取消订阅
            pubsub.unsubscribe(this.pid)
        }
    }
</script>