Vue---任意组件间消息订阅与发布（pubsub）-蒲公英云

Vue---任意组件间消息订阅与发布（pubsub）

对比全局事件总线学习（不要混）

http://t.csdn.cn/4PYmQ

总结

工作模型

下载库

引入库

一、任意组件间消息订阅与发布

student.vue发布消息

重要代码

school.vue接收消息

重要代码

总结

工作模型

下载库

引入库

import pubsub from 'pubsub-js'

一、任意组件间消息订阅与发布

由student.vue 向school.vue 传输数据

student.vue发布消息

<template>
<!-- <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:'男',
                 age:18
                }
            },
            methods:{
              sendStudentName(){
              // 发布hello消息  带着数据
              pubsub.publish('hello',this.name)
              }
            }
        }  
</script>
<style scoped>
      .student{
        background-color: red;
        padding:5px;
        margin-top:30px;
      }
</style>

重要代码

import pubsub from 'pubsub-js'
methods:{
              sendStudentName(){
              // 发布hello消息  带着数据
              pubsub.publish('hello',this.name)
              }
            }

school.vue接收消息

<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() {
            // 订阅hello消息
            // function(msgName,data) 第一个参数是msgName 消息名  第二个参数是data 传过来的数据
            // this.pubId= pubsub.subscribe('hello',function(msgName,data){
            //     console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
            //     // 这里面的this是undefined
            // })
            this.pubId= pubsub.subscribe('hello',(msgName,data)=>{
                console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
                // 这里面的this是vc
            })
        },
        beforeDestroy() {
            // 当我们的school组件销毁前，我们取消订阅
            // 这个取消订阅的方式很像定时器，传入一个id取消
            pubsub.unsubscribe(this.pubId)
        },
        }
</script>
<style scoped>
     .school{
        background-color: skyblue;
        padding:5px;
        margin-top:30px;
     }
</style>

重要代码

import pubsub from 'pubsub-js'
mounted() {
            // 订阅hello消息
            // function(msgName,data) 第一个参数是msgName 消息名  第二个参数是data 传过来的数据
            // this.pubId= pubsub.subscribe('hello',function(msgName,data){
            //     console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
            //     // 这里面的this是undefined
            // })
            this.pubId= pubsub.subscribe('hello',(msgName,data)=>{
                console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
                // 这里面的this是vc
            })
        },
        beforeDestroy() {
            // 当我们的school组件销毁前，我们取消订阅
            // 这个取消订阅的方式很像定时器，传入一个id取消
            pubsub.unsubscribe(this.pubId)
        },