前端基础之消息订阅与发布

需要下载npm I pubsub-js

在Student.vue中发送数据

<template>

  <div class="demo">

    <h2  class="title">学生姓名:{{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:"男"

        }

    },

    methods:{

      sendStudentName(){

        pubsub.publish('hello',this.name)

      }

    }

}

</script>

<style scoped>

.demo{

  background-color: orange;

}

</style>

在School.vue中接收数据

<template>

  <div class="demo">

    <h2 class="title">学校名称:{{name }}</h2>

    <h2>学校地址:{{addr}}</h2>

  </div>

</template>

<script>

import pubsub from 'pubsub-js'

export default {

    name:'School',

    data(){

        return{

          name:'尚硅谷atguigu',

          addr:'北京'

        }

    },

    methods:{

      demo(msgName,data){

        console.log('有人发布了hello消息，hello消息回调执行了',msgName,data)

      }

    },

    mounted(){

       this.pubId=   pubsub.subscribe('hello',this.demo)

    },

    beforeDestroy(){

      pubsub.unsubscribe(this.pubId)

    }

}

</script>

<style scoped>

.demo{

  background: skyblue;

}

</style>