vue组件之间的交互（三）之消息订阅与发布组件Pubsub

前言

vue组件之间的关系有父子组件、同级组件以及孙父子三级关系、还有更复杂的四级、五级关系，那他们之间的数据以及方法如何传递，也就是父子组件、同级组件、孙子组件等如何调用各自的变量、方法呢？

正文

前面博主已经讲了同组件和父子组件的交互，那如果两个没有任何关系的组件或者更复杂的孙与子的三级组件、四级组件之间怎么交互？

这时再用前面所说的方法已经做不到了或者说很难实现了
这时就要用消息订阅与发布组件Pubsub了，他可以在任意组件之间实现交互

步骤

1.安装PubSub

首先在终端使用一下指令安装PubSub

npm install --save pubsub-js

安装成功就能在这里看到pubsub-js

2.引入组件

在要使用的组件中引入pubsub-js，这个不能全局引入只能哪个组件中使用就在哪个组件中引入

3.消息订阅

在被调用的组件中使用 PubSub.subscribe(name,function)订阅消息

被调用组件

<template>
  <div id="app">
    <PubSubDemo></PubSubDemo>
  </div>
</template>

<script>
  import PubSubDemo from './components/PubSubDemo.vue'//子组件
  import PubSub from 'pubsub-js'//引入PubSub
export default {
  name: 'App',
  components:{
    PubSubDemo  //映射组件
  },
  methods:{
    say(msg){
      alert(msg);
    }
  },
  mounted() {
    //消息订阅，相当于前面的绑定事件监听
    PubSub.subscribe('answer',(msg,data)=>{
      this.say(data);
    })
  }

}
</script>

<style>
</style>

4.发布

在调用组件使用 PubSub.publish(name,data);发布消息

<template>
  <div>
    <button @click="answer">这个世界谁最帅啊？</button>
  </div>
</template>

<script>
  import PubSub from 'pubsub-js'//引入PubSub
  export default{
    name:'PubSubDemo',
    methods:{
      answer(){
        //发布
        PubSub.publish('answer','博主最帅');
      }
    }
  }
</script>

<style>
</style>

运行的效果图