1、基础知识

类别引用说明：订阅报纸。用户作为订阅者订购报纸，邮局派送报纸。

1、一种组件间通信的方式，适用于任意组件间通信。

2、使用步骤：

安装pubsub：npm i pubsub-js（安装不成功、使用管理员权限运行）
引入: import pubsub from 'pubsub-js'（订阅和发布都要引入）

3、接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

      methods(){demo(data){......}}......mounted() {this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息}

4、提供数据：pubsub.publish('xxx',数据)（这里的传参传两个、第一个是订阅名、第二个是数据）

5、最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

2、代码实例

实现的效果：student组件中的信息发送到School组件中。student作为信息的发布者，School组件订阅信息。

2.1 main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false//创建vm
new Vue({el:'#app',render: h => h(App),
})

2.2 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() {// console.log('School',this)/* this.$bus.$on('hello',(data)=>{console.log('我是School组件，收到了数据',data)}) */this.pubId = pubsub.subscribe('hello',(msgName,data)=>{console.log(this)// console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)})},beforeDestroy() {// this.$bus.$off('hello')pubsub.unsubscribe(this.pubId)},}
</script><style scoped>.school{background-color: skyblue;padding: 5px;}
</style>

2.3 Student.vue

<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:'男',}},mounted() {// console.log('Student',this.x)},methods: {sendStudentName(){// this.$bus.$emit('hello',this.name)pubsub.publish('hello',666)}},}
</script><style lang="less" scoped>.student{background-color: pink;padding: 5px;margin-top: 30px;}
</style>

2.4 App.vue

<template><div class="app"><h1>{{msg}}</h1><School/><Student/></div>
</template><script>import Student from './components/Student'import School from './components/School'export default {name:'App',components:{School,Student},data() {return {msg:'你好啊！',}}}
</script><style scoped>.app{background-color: gray;padding: 5px;}
</style>

3、全局事件总线通信改为消息的订阅和发布

全局事件总线实现组件间通信：https://blog.csdn.net/weixin_43304253/article/details/126475369

3.1 核心部分代码

这里只修改一处、删除列表项的数据方式改为消息订阅和发布的形式

3.1.1 TheItem.vue(样式省略)、发布消息

消息发布、将要删除的id传递给App.vue

<template><li><label><inputtype="checkbox":checked="todo.done"@change="handleCheck(todo.id)"/><span>{{ todo.title }}</span></label><button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button></li>
</template><script>
import pubsub from 'pubsub-js'
export default {name: "MyItem",//声明接收todo、checkTodo、deleteTodoprops: ["todo"],methods: {//勾选or取消勾选handleCheck(id) {//通知App组件将对应的todo对象的done值取反//   this.checkTodo(id);this.$bus.$emit('checkTodo',id)},//删除handleDelete(id) {if (confirm("确定删除吗？")) {//通知App组件将对应的todo对象删除// this.deleteTodo(id);// this.$bus.$emit('deleteTodo',id)// 消息发布pubsub.publish('deleteTodo',id)}},},
};
</script>

3.1.2 App.vue 订阅消息

<template><div id="root"><div class="todo-container"><div class="todo-wrap"><TheHeader @addTodo="addTodo" /><TheList :todos="todos" /><TheFooter:todos="todos"@checkAllTodo="checkAllTodo"@clearAllTodo="clearAllTodo"/></div></div></div>
</template><script>
import TheHeader from "./components/TheHeader";
import TheList from "./components/TheList";
import TheFooter from "./components/TheFooter.vue";
import pubsub from "pubsub-js";
export default {name: "App",components: { TheHeader, TheList, TheFooter },data() {return {msg: "你好啊！",studentName: "",//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）todos: JSON.parse(localStorage.getItem("todos")) || [],// todos: [//   { id: "001", title: "吃饭", done: true },//   { id: "002", title: "睡觉", done: false },//   { id: "003", title: "打豆豆", done: true },// ],};},methods: {//添加一个todoaddTodo(todoObj) {this.todos.unshift(todoObj);},//勾选or取消勾选一个todocheckTodo(id) {this.todos.forEach((todo) => {if (todo.id === id) todo.done = !todo.done;});},//删除一个tododeleteTodo(_, id) {this.todos = this.todos.filter((todo) => todo.id !== id);},//全选or取消全选checkAllTodo(done) {this.todos.forEach((todo) => {todo.done = done;});},//清除所有已经完成的todoclearAllTodo() {this.todos = this.todos.filter((todo) => {return !todo.done;});},},watch: {todos: {deep: true,handler(value) {localStorage.setItem("todos", JSON.stringify(value));},},},mounted() {this.$bus.$on("checkTodo", this.checkTodo);// this.$bus.$on('deleteTodo',this.checkTodo)//订阅消息、调用方法里边的函数、参数两个。第一个订阅消息名称、第二个是数据。也可以直接写成箭头函数this.pubId = pubsub.subscribe("deleteTodo", this.deleteTodo);},beforeDestroy() {this.$bus.$off("checkTodo");//  this.$bus.$off('deleteTodo')// 取消订阅pubsub.unsubscribe(this.pubId);},
};
</script>

4、测试结果说明

Vue学习之--------消息订阅和发布、基础知识和实战应用（2022/8/24）相关推荐

Vue（组件间通信：props、自定义事件、全局事件总线、消息订阅与发布）
一.props props不仅可以实现父给子传递信息,还可以进行子给父传递信息 1.父给子传递信息: 父组件中给子组件实例传递信息子组件利用props进行接收组件传递信息(接收方式有三种:数组.对象 ...
mqttnet+emqx实现消息订阅与发布
mqttnet+emqx实现消息订阅与发布 1 在Windows操作系统下使用EMQX 1.1 部署前准备首先进入官网https://www.emqx.io/zh/downloads?os=Wind ...
【Vue2.0】— 消息订阅与发布pubsub（二十）
[Vue2.0]- 消息订阅与发布pubsub(二十)
小程序中消息订阅与发布
注:小程序中最好不要在开发工具里面使用命令行安装,最好使用外部的 1)首先要在项目中初始化一个package.json用来存放包 npm init 2)下载安装要使用的包,这里是要使用消息订阅与发布 ...
切换上下首音乐功能的实现（消息订阅与发布的使用）
切换上下首音乐思路: 切换歌曲,实际上是切换歌曲的id,歌曲的详情页只有当前播放歌曲的id,所以要想更新音乐的id得去每日推荐的列表页更新,切换歌曲有两种情况,一个是上一首,一个是下一首,可以绑定在 ...
pwn学习总结（四）—— 堆基础知识（持续更新）
pwn学习总结(四)-- 堆基础知识(持续更新) 前言 chunk 使用中(分配后) 空闲中(释放后) 堆块大小空间复用 bins fastbin unsorted bin small bin 前言 ...
Java编程语言学习：Java语言编程的基础知识之Java的变量与数据类型、符号、运算符、数组Array总结之详细攻略
Java编程语言学习:Java语言编程的基础知识之Java的变量与数据类型.符号.运算符.数组Array总结之详细攻略目录 Java语言编程的基础知识之Java的变量与数据类型.符号.运算符.数组总 ...
3D视觉学习计划之PCL库的基础知识
3D视觉学习计划之PCL库的基础知识一.PCL库的概述 PCL是一个大型跨平台开源C++编程库,它在吸收了前人点云相关研究基础上建立起来,实现了大量点云相关的通用算法和高效数据结构,涉及到点云获取. ...
从零开始学习VIO笔记 --- 第一讲：基础知识（四元数，李代数）
从零开始学习VIO笔记 --- 第一讲:基础知识(四元数,李代数) 一. 向量的内积与外积二. 旋转与平移 2.1 旋转表示 --- 旋转矩阵R 2.2 平移向量 2.3 变换矩阵T与齐次坐标 2. ...

Vue学习之--------消息订阅和发布、基础知识和实战应用（2022/8/24）

文章目录