前言
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>
运行的效果图
在这里插入图片描述
