一.vue 消息订阅和发布(pubsub-js)

已于 2022-07-22 11:06:55 修改
阅读量853 收藏 2
点赞数
分类专栏： vue 文章标签： 前端
于 2022-07-22 11:02:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010074478/article/details/125925699
版权

目录

一.安装和使用

二.简单实例

1.App.vue 引入 student.school 两个同级组件

2. student.vue中 按钮触发方法 sendStudentName

3.school中使用mounted, 接收消息, 并beforeDestroy前取消挂载

4.完整代码    

三.消息&事件总线

1.main.js中 创建事件主线bus new Vue({    el:'#app',    render: h => h(App),    beforeCreate() {        Vue.prototype.$bus = this    },})

2. 在App.vue中 定义了一些事件,  并分别使用事件总线和消息 接收数据

3. 在3级列表组件MyItem.vue中,引入 并调用消息 

4. 完整代码

一.安装和使用

1. 在线文档: https://github.com/mroderick/PubSubJS
2. 下载: npm install -S pubsub-js
3. 相关语法
(1) import PubSub from 'pubsub-js' // 引入
(2) PubSub.subscribe(‘msgName’, functon(msgName, data){ })
(3) PubSub.publish(‘msgName’, data): 发布消息, 触发订阅的回调函数调用
(4) PubSub.unsubscribe(token): 取消消息的订阅

二.简单实例

主线逻辑:

1.App.vue 引入 student.school 两个同级组件

2. student.vue中 按钮触发方法 sendStudentName

import pubsub from 'pubsub-js'
sendStudentName(){
   // this.$bus.$emit('hello',this.name)
   pubsub.publish('hello',666)
}

3.school中使用mounted, 接收消息, 并beforeDestroy前取消挂载

import pubsub from 'pubsub-js'
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)
},

4.完整代码    

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),
})

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>

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>

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>

三.消息&事件总线

主线逻辑

1.main.js中 创建事件主线bus 
new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    },
})

2. 在App.vue中 定义了一些事件,  并分别使用事件总线和消息 接收数据

mounted() {
    this.$bus.$on('checkTodo',this.checkTodo)
    this.$bus.$on('updateTodo',this.updateTodo)
    this.pubId = pubsub.subscribe('deleteTodo',this.deleteTodo)
},
beforeDestroy() {
    this.$bus.$off('checkTodo')
    this.$bus.$off('updateTodo')
    pubsub.unsubscribe(this.pubId)
},

3. 在3级列表组件MyItem.vue中,引入 并调用消息 

import pubsub from 'pubsub-js'
pubsub.publish('deleteTodo',id)
this.$bus.$emit('checkTodo',id)


methods中,调用事件总线和消息,并使用$nextTick(数据重新渲染后再执行些方法)

4. 完整代码

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),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})

2.App.vue

<template>
	<div id="root">
		<div class="todo-container">
			<div class="todo-wrap">
				<MyHeader @addTodo="addTodo"/>
				<MyList :todos="todos"/>
				<MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
			</div>
		</div>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	import MyHeader from './components/MyHeader'
	import MyList from './components/MyList'
	import MyFooter from './components/MyFooter'

	export default {
		name:'App',
		components:{MyHeader,MyList,MyFooter},
		data() {
			return {
				//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
				todos:JSON.parse(localStorage.getItem('todos')) || []
			}
		},
		methods: {
			//添加一个todo
			addTodo(todoObj){
				this.todos.unshift(todoObj)
			},
			//勾选or取消勾选一个todo
			checkTodo(id){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.done = !todo.done
				})
			},
			//更新一个todo
			updateTodo(id,title){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.title = title
				})
			},
			//删除一个todo
			deleteTodo(_,id){
				this.todos = this.todos.filter( todo => todo.id !== id )
			},
			//全选or取消全选
			checkAllTodo(done){
				this.todos.forEach((todo)=>{
					todo.done = done
				})
			},
			//清除所有已经完成的todo
			clearAllTodo(){
				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('updateTodo',this.updateTodo)
			this.pubId = pubsub.subscribe('deleteTodo',this.deleteTodo)
		},
		beforeDestroy() {
			this.$bus.$off('checkTodo')
			this.$bus.$off('updateTodo')
			pubsub.unsubscribe(this.pubId)
		},
	}
</script>

3. MyHeader.vue

<template>
	<div class="todo-header">
		<input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/>
	</div>
</template>

<script>
	import {nanoid} from 'nanoid'
	export default {
		name:'MyHeader',
		data() {
			return {
				//收集用户输入的title
				title:''
			}
		},
		methods: {
			add(){
				//校验数据
				if(!this.title.trim()) return alert('输入不能为空')
				//将用户的输入包装成一个todo对象
				const todoObj = {id:nanoid(),title:this.title,done:false}
				//通知App组件去添加一个todo对象
				this.$emit('addTodo',todoObj,1,2,3)
				//清空输入
				this.title = ''
			}
		},
	}
</script>

4.MyList.vue

<template>
	<ul class="todo-main">
		<MyItem 
			v-for="todoObj in todos"
			:key="todoObj.id" 
			:todo="todoObj" 
		/>
	</ul>
</template>

<script>
	import MyItem from './MyItem'

	export default {
		name:'MyList',
		components:{MyItem},
		//声明接收App传递过来的数据
		props:['todos']
	}
</script>

5.MyItem.vue

<template>
	<li>
		<label>
			<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
			<!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
			<!-- <input type="checkbox" v-model="todo.done"/> -->
			<span v-show="!todo.isEdit">{{todo.title}}</span>
			<input 
				type="text" 
				v-show="todo.isEdit" 
				:value="todo.title" 
				@blur="handleBlur(todo,$event)"
				ref="inputTitle"
			>
		</label>
		<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
		<button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
	</li>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'MyItem',
		//声明接收todo
		props:['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)
				}
			},
			//编辑
			handleEdit(todo){
				if(todo.hasOwnProperty('isEdit')){
					todo.isEdit = true
				}else{
					// console.log('@')
					this.$set(todo,'isEdit',true)
				}
				this.$nextTick(function(){
					this.$refs.inputTitle.focus()
				})
			},
			//失去焦点回调（真正执行修改逻辑）
			handleBlur(todo,e){
				todo.isEdit = false
				if(!e.target.value.trim()) return alert('输入不能为空！')
				this.$bus.$emit('updateTodo',todo.id,e.target.value)
			}
		},
	}
</script>

6.MyFooter

<template>
	<div class="todo-footer" v-show="total">
		<label>
			<!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> -->
			<input type="checkbox" v-model="isAll"/>
		</label>
		<span>
			<span>已完成{{doneTotal}}</span> / 全部{{total}}
		</span>
		<button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
	</div>
</template>

<script>
	export default {
		name:'MyFooter',
		props:['todos'],
		computed: {
			//总数
			total(){
				return this.todos.length
			},
			//已完成数
			doneTotal(){
				//此处使用reduce方法做条件统计
				/* const x = this.todos.reduce((pre,current)=>{
					console.log('@',pre,current)
					return pre + (current.done ? 1 : 0)
				},0) */
				//简写
				return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)
			},
			//控制全选框
			isAll:{
				//全选框是否勾选
				get(){
					return this.doneTotal === this.total && this.total > 0
				},
				//isAll被修改时set被调用
				set(value){
					// this.checkAllTodo(value)
					this.$emit('checkAllTodo',value)
				}
			}
		},
		methods: {
			/* checkAll(e){
				this.checkAllTodo(e.target.checked)
			} */
			//清空所有已完成
			clearAll(){
				// this.clearAllTodo()
				this.$emit('clearAllTodo')
			}
		},
	}
</script>

爱菜鸟高高飞
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
探索 PubSubJS：一个轻量级的发布订阅模式实现
gitblog_00061的博客
03-21 493
探索 PubSubJS：一个轻量级的发布订阅模式实现 项目地址:https://gitcode.com/mroderick/PubSubJS PubSubJS 是一个小型 JavaScript 库，由 Michael O'Roderick 创建并维护。它提供了一个简单的接口，用于在应用程序的不同部分之间实现事件驱动的通信，这就是所谓的“发布/订阅”模式。通过这种模式，模块可以相互解耦，提高代码的可...
Vue-消息订阅与发布(pub/sub)
见证自己学习,成长的记录
06-22 3823
一种组件间通信的方式，适用于任意组件间通信。引入:接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。methods(){......this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息pubsub.publish('xxx',数据)最好在beforeDestroy钩子中，用去取消订阅。
vue组件通信---非父子组件（bus）/任意组件间的通信（pubsub）
muzidigbig的博客
11-20 2432
方式一：bus中央总线 利用总线方式可以平级组件进行通信 无论是父向子传值还是子向父传值，都需要一个中间介质。对于平级组件来说其实也一样，他们也需要一个中间介质来作为一个中央事件总线。 第一步：我们先来创建中央事件总线，在src/assets/下创建一个eventBus.js,内容如下 import Vue from 'vue' export default new Vue(); ...
Vue的消息订阅与发布
技术小白=-=的博客
07-26 1728
Vue的消息订阅与发布，笔记版
[Vue]消息的订阅与发布
emmmm.....
10-18 1019
1. 消息的订阅与发布 1.1 简介 1.2 pubsub-js 1.2.1 安装 1.2.2 引入 1.2.3 订阅消息 1.2.4 发布消息 1.2.5 取消订阅 2. 消息的订阅与发布实现组件通信 3. 消息的订阅与发布 总结
shreaddy-pubsub-client:Shreaddy的pubsub的JS客户端
04-12
Shreaddy-pubsub-client可能利用了事件监听器和回调函数来实现消息的发布和接收。 4. **模块化和API设计**：作为一个客户端库，它应提供清晰的API接口，使开发者能够轻松地订阅新的主题、发布消息、以及处理错误等...
pubsub:订阅和发布
05-18
在IT行业中，`pubsub`（发布/订阅）模式是一种重要的设计模式，它在JavaScript和其他编程语言中广泛应用，尤其是在构建事件驱动系统时。这个模式允许不同的组件之间通过发送和接收消息进行通信，而不是直接调用对方...
vue.js视频教程及源码（一）
10-19
第十九节：消息订阅与发布组件Pubsub 第二十节：slot插槽 第二十一节：Ajax框架vue-resource&axios 第二十二节：过渡&动画 第二十三节：vue Router路由基本使用 第二十四节：vue Router嵌套路由 第二十五节：vue ...
开源项目-qneyrat-web-pubsub-example.zip
09-03
开源项目“qneyrat-web-pubsub-example”提供了一个简单的发布/订阅（pub/sub）架构，结合了WebSocket服务器和REST API。这个项目旨在帮助开发者理解如何在Web应用中实现实时通信，通过WebSocket进行数据推送，并...
vue-cesium-template-master.zip
11-12
4. **pubsub-js**：这是一个轻量级的发布/订阅模式消息传递库。在Vue应用中，使用pubsub-js可以实现组件间通信，特别是当组件之间没有层级关系时。通过发布主题和订阅主题，组件可以在需要时接收或发送消息，提高...
React使用pubsub-js订阅发布和取消订阅
sunnyjingqi的博客
07-09 1448
PubSub.subsribe( )是用于订阅消息，在componentDidMount( )中使用。在componentWillUnmount中取消订阅
一个易用的消息订阅发布系统-Pubsub.js
奇舞周刊
11-07 237
本文作者系360奇舞团前端开发工程师简介随着软件架构越来越复杂，如何有效地解决各个模块之间的通信问题变得尤为重要。一种常见的解决方案就是采用消息订阅发布机制。在这种模式下，每个模块只需要关注自己要发送或接收的消息，而不必关心其他模块的内部实现。今天要介绍的 pubsub.js 就是一个非常实用的消息订阅发布库。它具有使用简单、性能高效、支持多平台等优点，可以很好地满足各种需求。基本使用首先，让我们...
Vue——PubSub.js
qq_42753983的博客
09-01 322
Vue组件传值新方式——PubSub.js
vue中的消息订阅与发布
最新发布
weixin_51660483的博客
04-03 365
pubsub.subscribe('数据题目', (messageName, message) =>{}返回的是当前订阅对象的id。subscribe 方法用于订阅一个特定的消息，当有消息发布时，会调用一个回调函数。主要点:pubsub.publish("title", "今天又多学了一点");1.2： PublisherComponent.vue的代码。1.弊端：需要依赖第三方库，本文采用pubsub-js库。一.用处：用于组件之间数据的传递。一.用处：用于组件之间数据的传递。
Vue 消息订阅与发布
xiaowude_boke的博客
04-21 1037
Vue 消息订阅与发布
JavaScript中的发布订阅和观察者模式：如何优雅地处理事件和数据更新
唯见青山不见君
12-09 1279
JavaScript中的发布订阅和观察者模式：如何优雅地处理事件和数据更新
vue订阅消息和发布消息
qq_63656102的博客
04-20 162
顾名思义也知道，需要数据的那个组件来订阅消息就可以了，然后等着那个有数据的组件来发布消息就可以了。理解起来也是很容易的。上一个文章我们说到两个组件之间可以利用全局中间组件来实现，其实还有一个更简单的方法可以实现两个组件之间的通信，那就是订阅消息和发布消息。订阅消息是 pusub.subscribe("订阅消息名称","(回调函数,第一个参数是消息名称，戴第二个参数是传回的数据)=>")发布消息是pubsub.publish("订阅消息名称"，“要发布的信息数据”);首先得需要一个第三方库，叫。
RuoYi-Vue前后端分离搭建MQTT服务器实现消息订阅、发布、数据存储 (EMQX Windows10)最全,懒人操作
xu275321143的博客
04-07 4873
1、在项目的superVisualizationSys-common模块下的pom.xml加入jar包依赖2、在application.yml添加相关配置，加在下3、在superVisualizationSys-common\src\main\java\com\superVisualization\common\utils目录下新建mqtt文件夹，添加以下三个文件注：项目报红的地方可以按Alt+Enter键导包在windows上安装环境，操作系统是WINDOWS10系统，内存需2G以上。
PubSubJS的基本使用
热门推荐
m0_37148591的博客
03-15 1万+
前言 日常积累 参考 PubSubJS-GitHub PubSubJS-npm 使用说明 首先说明我当前使用的 pubsub 版本为 1.6.0 什么是 pubsub? PubSubJS is a topic-based publish/subscribe library written in JavaScript.即 一个利用JavaScript进行发布/订阅的库 使用 React + Type...
To install them, you can run: npm install --save mammoth mammoth/mammoth.browser mammoth/mammoth.browser.js nanoid pubsub-js vue-drag-resize
09-01
To install the mentioned packages, you can use the following command: ``` npm install --save mammoth mammoth/mammoth.browser mammoth/mammoth.browser.js nanoid pubsub-js vue-drag-resize ``` This command will install the `mammoth`, `mammoth/mammoth.browser`, `mammoth/mammoth.browser.js`, `nanoid`, `pubsub-js`, and `vue-drag-resize` packages and save them as dependencies in your project.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值