1. 先下載 cnpm i pubsub-js

釋出訊息 : 傳遞資料的

<template>
    <div class="student">
        <h2>學生姓名：{{name}}</h2>
        <h2>學生性別：{{sex}}</h2>
        <button @click="sendStudentName">把學生名給School元件</button>
    </div>
</template>

<script>
    import pubsub from 
 
'pubsub-js'
    export default {
        name:'Student',
        data() {
            return {
                name:'張三',
                sex:'男',
            }
        },
        mounted() {
            // console.log('Student',this.x)
        },
        methods: {
            sendStudentName(){
                
 
// 釋出訊息
                pubsub.publish('hello',666)
            }
        },
    }
</script>

<style lang="less" scoped>
    .student{
        background-color: pink;
        padding: 5px;
        margin-top: 30px;
    }
</style>

訂閱訊息 :  獲取資料的

<template>
    <div class="school"
 
>
        <h2>學校名稱：{{name}}</h2>
        <h2>學校地址：{{address}}</h2>
    </div>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default {
        name:'School',
        data() {
            return {
                name:'尚矽谷',
                address:'北京',
            }
        },
        mounted() {
            //訂閱訊息
            this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
                console.log(this)
                // console.log('有人釋出了hello訊息，hello訊息的回撥執行了',msgName,data)
            })
        },
        beforeDestroy() {
            pubsub.unsubscribe(this.pubId)
        },
    }
</script>

<style scoped>
    .school{
        background-color: skyblue;
        padding: 5px;
    }
</style>

1. 一種元件間通訊的方式，適用於任意元件間通訊。

2. 使用步驟：

   1. 安裝pubsub：npm i pubsub-js

   2. 引入: import pubsub from 'pubsub-js'

   3. 接收資料：A元件想接收資料，則在A元件中訂閱訊息，訂閱的回撥留在A元件自身。

      methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.pid = pubsub.subscribe('xxx',this.demo) //訂閱訊息
      }

   4. 提供資料：pubsub.publish('xxx',資料)

   5. 最好在beforeDestroy鉤子中，用PubSub.unsubscribe(pid)去取消訂閱。