vue中使用发布订阅的方式进行vue组件之间的通信-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46872121/article/details/110953761

本文介绍如何使用PubSub.js实现Vue组件间的通信。通过header组件触发搜索事件，main组件接收并处理事件，完成前后端交互及页面渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明：
绑定事件监听—订阅消息pubsub.subscrib(名称,参数）
触发事件—发布消息-----pubsub.publish(名称,参数）

1.安装pubsub-js

npm install --save pubsub-js

2.以实例说明pubsub的用法
在这里插入图片描述

在上图中，我们头部header需要向后台发送关键字，后台根据得到的关键字进行相应的操作，返回项目需要的数据，main组件就是需要利用返回后台的数据据，进行页面的渲染（这要明白，发送ajax请求必然是在main组件中，header组件的作用是将关键字传给main组件，卖弄组件向后台发送ajax请求，返回数据，再进一步渲染）
因此，这便涉及到组件之间的通信，pubsub-JS就是用来实现组件之间的通信的
由于header与mian的关系是兄弟关系，若使用props属性，需要借助父组件来实现，pubsub（也是我们所说的订阅消息与发布消息）跨越组件之间的关系进行通信。
因此我们在header中点击搜索时会通知main组件向后台发送ajax请求，因此在header中发布消息（触发），在main中订阅消息（监听）

2.1具体代码如下：

在这里插入图片描述

其中，search点击时，按钮的点击回调函数中去发布消息
发布消息的方法是PubSub.publish()，需要通过提供两个参数，参数一为”发布的消息名“，第二个参数是搜索框中输入的关键字”searchName“参数，在main组件中订阅消息是便可以接收到该参数，进而向后台发送ajax请求；
在main组件的生命周期函数mounted（页面加载完成时）订阅消息，订阅消息时PubSub.subscribe()方法，这里接收两个参数，”发布消息名“，”事件监听函数“，这里的事件监听函数需要两个参数：一个时msg（发布的消息名，无用），一个时searchName（发布者传来的参数），我们在事件监听里面发送ajax请求，更新页面

在main组件的代码如下

在这里插入图片描述
全部实现代码如下：

header.vue组件的相关代码

<template>
  <div id="header">
    <div class="container">
      <div class="row center">
        <h1>Search GitHub Users</h1>
        <input type="text" v-model="searchName">
        <input type="button" value="Search" class="btn btn-primary" placeholder="请输入 github 用户名" @click="search">
      </div>
    </div>
  </div>
</template>
<script>
import PubSub from 'pubsub-js'
export default {
  name: 'Header',
  data () {
    return {
      searchName: ''
    }
  },
  methods: {
    search ()
    {
      // 发布消息
      const searchName = this.searchName.trim()
      if (searchName) {
        PubSub.publish('search', searchName)
      }
    }
  }
}
</script>
<style>
#header{
  height: 200px;
}
.container .center{
  text-align: center;
}
</style>

main组件的相关代码

<template>
  <div id="main">
    <h1 v-if="firstview">请输入搜索用户的名称</h1>
    <h1 v-if="loading">loading</h1>
    <h1 v-if="errormsg">{{errormsg}}</h1>
      <div class="row">
        <div class="col-xs-6 col-md-3" v-for="(user,index) in users" :key="index">
          <a :href="user.url">
            <img :src="user.avatar_url">
          </a>
          <span>{{user.name}}</span>
        </div>
      </div>
  </div>
</template>
<script>
import PubSub from 'pubsub-js'
import axios from 'axios'
// https://api.github.com/search/users?q=
export default {
  name: 'Main',
  data () {
    return {
      firstview: true,
      loading: false,
      errormsg: '',
      users: null // [{url:'',name:'',avatar_url:""}]
    }
  },
  mounted () {
    // 订阅消息
    PubSub.subscribe('search', (msg, searchName) => {
      const url = 'https://api.github.com/search/users?q='+searchName
      // 更新状态
      this.firstview = false
      this.loading = true
      this.users=null
      this.errormsg=''
      axios.get(url).then((response) => {
        const result = response.data
        const users = result.items.map(item => ({
          url: item.html_url,
          avatar_url: item.avatar_url,
          name: item.login
        }))
        // 更新请求成功的状态
        this.loading=false
        this.users=users
      }).catch(error => {
        this.loading=false
        this.errormsg='搜索失败'
      })
    })
  }
}
</script>
<style>
#main> .row ,#main h1{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#main> .row> div{
  float: left;
  width: 100px;
  padding: 0;
  text-align: center;
  color: red;
  font-size: 18px;
  margin: 0 10px;
}
.row a img{
  width: 100px;
  height: 100px;
}
</style>
/*这里主要是详细解释下 main.vue 中相关代码. 在项目的主体区域中, 我们需要通过后台返回的数据进行页面的渲染. 标签模板中主要是通过

v-for="(item,index) in items" :key="index"

指令遍历得到的数组, 进行页面渲染, 利用 v-for 我们可以轻松得到一组类似的结构, 而不必多次写一些重复的 HTML 标签. 在组件模板对象中我们定义了一组数据信息,*/