Vue 消息订阅发布实现数据传递

   上文讲了利用消息总线bus实现数据传递，今天在说一个利用消息订阅发布实现数据传递

1.首先需要在vs里面控制台处执行

npm i pubsub-js

随后在消息发布和订阅的vue组件页面都导入

import pubsub from 'pubsub-js'

2.消息发布组件

publishvue.vue

    <template>
        <div class="pub">
           <h2>利用pubsub发布订阅实现数据传递</h2>
           <button @click="sendStudentName3">利用pubsub发布订阅实现数据传递</button>
        </div>
    </template>

      <!--组件数据交互-->
      <script>
      import pubsub from 'pubsub-js'
        //这样写法更加简洁，这样用的多
        export default {
              name:'publishvue',
              data(){
                  return{
                    name:'lj',
                    sex:'男'
                  }
              },
              methods:{
                //利用全局总线bus实现数据传递  与 watchervue   this.$bus.$on呼应 与main.js beforeCreate 呼应
                sendStudentName3(){
                    pubsub.publish('words',this.name);
                }
              }
          }
      </script>

      <!--组件样式-->
      <style>
        .pub{
          background-color: grey;
        }
      </style>

3.消息订阅组件

subscribevue.vue

<template>
    <div id = "sub">
      <h2>subscribe开始</h2>
    </div>
</template>


<script type="text/javascript">
    import pubsub from 'pubsub-js'
    //这样写法更加简洁，这样用的多
    export default {
          name:'subscribevue',
          data(){
              return{
                name:"哈弗",
                address:"漂亮国",
                msg:"hahh",
                msg1111:"ha_yy"
              }
          },
          methods:{
             demo(msgname,data){
                console.log("有人发布了words消息，words消息的回调执行了:",data);
             }
          },
          mounted(){
            //msgname是发布的消息名也就是words,data才是真正的数据。每次订阅消息都会产生一个订阅的Id 下面this其实undefind，所以写成箭头函数或者methods定义回调函数
            // this.pubId= pubsub.subscribe('words',function(msgname,data){
            //     console.log("有人发布了words消息，words消息的回调执行了:",data);
            // })


            //方式一 直接箭头函数不用methods里面demo回调函数
            // this.pubId= pubsub.subscribe('words',(msgname,data)=>{
            //     console.log("有人发布了words消息，words消息的回调执行了:",data);
            // })
            // console.log("pubsub里面this指的是:",this);//this指的是VueComponent

            //方式二
            this.pubId= pubsub.subscribe('words',this.demo)
            console.log("pubsub里面this指的是:",this);//this指的是VueComponent
        },
        //不用了,在根据每一次订阅产生的订阅Id,解绑这个订阅的消息
        beforeDestroy(){
            pubsub.unsubscribe(this.pubId);
        }
      }
</script>

<!--组件样式-->
<style>
    .sub{
        background-color: grey;
    }
</style>

msgname：订阅消息的名称
data:才是具体的数据

上述消息订阅组件代码方式一和方式二都可以

4.最后在App.vue中进导入注册在写组件标签